<a href="javascript:foo(this)"> passes Window, I want the tag element itself

Question

I expect this to print "a" because when I call foo(this), the argument seems to be the link tag.

<script type="text/javascript"> 
    function foo (e) { 
     alert (e .tagName); 
    } 
</script> 
<a href="javascript:foo(this)">click</a> 

Instead, it prints "undefined". If I alert(e) it says "object Window". How do I make foo know which element launched it? Without passing/looking up ids.

Answer 1

You should not use href for JavaScript. Bad practice, instead use onclick and this will magically point to the link.

<a href="#" onclick="foo(this)">click</a> 

You also need to cancel the click action of the link. Either with return false or cancelling the event with preventDefault.

It is better to attach the event with Unobtrusive JavaScript

Answer 2

You can do this directly too

<a href="#" onclick="alert(this.tagName);">click</a>​ 

Answer 3

<a href="#" onclick="foo(this)">click</a> 

function foo(obj) { 
    alert(obj.tagName); 
}​ 

Non chiamare l'elemento e è uno standard per l'oggetto evento.

JSfiddle DEMO

Answer 4

L'oggetto this non viene gestito lo stesso in tutti i browser. Questo è uno dei tanti elementi che le librerie come Prototype e jQuery cercano di normalizzare. Detto questo, tuttavia, la maggior parte dei browser passerà l'appropriato this durante l'handle onclick (anziché lo href) come hanno indicato molte altre risposte. Se si desidera gestire in modo appropriato lo this, sarà necessario eseguire operazioni come quelle dettagliate in this question.