admin管理员组文章数量:1403493
Requirement: Return the element object.
Problem: Using the code below, I expected the links to return [object], but they actually return the string in the href attribute (or in the case of the first link, the Window object).
(The HTML below has been tested in FireFox 3.6.8 and Internet Explorer 7 (7.0.6002.18005) with the same results.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>Anchor onclick tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<a href="javascript:alert(this);" title=""><a href="javascript:alert(this);">...<a/></a> - Returns: [object Window]<br />
<a href="#" onclick="alert(this);" title=""><a href="#" onclick="alert(this);">...<a/></a> - Returns: Full URI<br />
<a href="javascript:void(0);" onclick="alert(this);" title=""><a href="javascript:void(0);" onclick="alert(this);">...<a/></a> - Returns: javascript:void(0);
</div>
</body>
</html>
Adding .tagname to the this keyword returns undefined for the first link but correctly identifies the second and third as A. Likewise, requesting .href returns undefined for the first link but correctly outputs the href (full URI in the case of '#').
Does anyone know why, and how I can get a hold on the A object itself?
Requirement: Return the element object.
Problem: Using the code below, I expected the links to return [object], but they actually return the string in the href attribute (or in the case of the first link, the Window object).
(The HTML below has been tested in FireFox 3.6.8 and Internet Explorer 7 (7.0.6002.18005) with the same results.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Anchor onclick tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<a href="javascript:alert(this);" title=""><a href="javascript:alert(this);">...<a/></a> - Returns: [object Window]<br />
<a href="#" onclick="alert(this);" title=""><a href="#" onclick="alert(this);">...<a/></a> - Returns: Full URI<br />
<a href="javascript:void(0);" onclick="alert(this);" title=""><a href="javascript:void(0);" onclick="alert(this);">...<a/></a> - Returns: javascript:void(0);
</div>
</body>
</html>
Adding .tagname to the this keyword returns undefined for the first link but correctly identifies the second and third as A. Likewise, requesting .href returns undefined for the first link but correctly outputs the href (full URI in the case of '#').
Does anyone know why, and how I can get a hold on the A object itself?
- 'this' refers to the execution context. For the first, 'this' refers to global i.e. window object. And for the latter two 'this' refers to 'a' object. – Nazmul Commented Jul 29, 2010 at 15:22
2 Answers
Reset to default 6As you said, accessing a property in the second and third link works. That means that this is indeed the A DOM element but when it is converted to a string (which is what happens when you want to alert it) it is converted to the URL.
So you already have your object ;)
Same happens when you do alert(document.location). It is actually an object but when converted to a string, it prints the current location.
When alert is invoked, the toString method is internally invoked so for the case of the anchors alerting the href, the toString of anchors returns the href instead.
<a id="foo" href="blah">fsdjl</a>
In the JS console, do:
document.getElementById('foo').toString()
This would confirm it.
As for window, this isn't bound to a method owned by the anchor, so this refers to the global context. onclick is bound to the anchor so this, aka current execution context, changes to the anchor.
<a href="#" onclick="javascript:alert( this.nodeName )">blah</a>
The result is it alerts A which is the nodeName, so the browser does return the href if there is an href set so it's more "readable" and less vague.
本文标签： Javascript 39this39 keyword returning href attribute rather than Object on anchor tagStack Overflow
版权声明：本文标题：Javascript 'this' keyword returning href attribute rather than Object on anchor tag - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744381831a2603543.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论