I'm trying to put a listener on every tag "a". Here the example: /

function callback(e) {
    var e = window.e || e;
/*
    if (e.target.tagName !== 'A')
        return;
*/
       
    alert('The link is: ' + e.target.href);
}

if (document.addEventListener){
    document.addEventListener('click', function (event) {
        event.preventDefault();
        callback(event);
    });
}else{
    document.attachEvent('onclick', function (event) {
        event.preventDefault();
        callback(event);
    });
}

<!-- Works -->    
<a href="">my text</a>

<!-- not works -->
<a href="">    
    <div>my div</div>
</a>

I'm trying to put a listener on every tag "a". Here the example: http://fiddle.jshell/w5unvaxt/

function callback(e) {
    var e = window.e || e;
/*
    if (e.target.tagName !== 'A')
        return;
*/
       
    alert('The link is: ' + e.target.href);
}

if (document.addEventListener){
    document.addEventListener('click', function (event) {
        event.preventDefault();
        callback(event);
    });
}else{
    document.attachEvent('onclick', function (event) {
        event.preventDefault();
        callback(event);
    });
}

<!-- Works -->    
<a href="http://www.example.">my text</a>

<!-- not works -->
<a href="http://www.example.">    
    <div>my div</div>
</a>

The first example works good but not the second. How can I solve this issue?

• javascript

• 2 Put the code in your post – epascarello Commented Apr 27, 2015 at 12:44
• you need to attach to the anchor elements...instead of the document... – deostroll Commented Apr 27, 2015 at 12:45
• First <a> element is alone and second one is wrapped inside <div>! – Dhaval Marthak Commented Apr 27, 2015 at 12:49
• console.log(e.target) and you will see it is no an anchor you are clicking on. Hence why it is undefined. Also your code tries to be cross browser friendly, but it is wrong on many levels. there is no window.e, not all browsers use e.target. – epascarello Commented Apr 27, 2015 at 12:50
• @epascarello thanks, I will find the solution. – Anthony Lee Commented Apr 27, 2015 at 12:54

1 Answer 1

The reason your code doesn't work is because the target element being clicked is the div not the a. This means that e.target.href is undefined for the div.

Using event delegation in plain JS is quite difficult. Just looking at the source code of a small library that acplishes kinda what you want, I can see that it loops through the targets and if the target does not match the specified it assigns target to target.parentNode.

I would remend using a small library like the ones I have linked (or event jQuery!).

You could use event delegation.

Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.

Here is an article on how event delegation works.

And the following is my example of how to use event delegation in plain JS.

// Get the parent DIV, add click listener...
document.body.addEventListener("click", function(e) {
	// e.target was the clicked element
	if(e.target && e.target.nodeName == "A") {
		alert(e.target.innerText);
	}
});

<a href="#">Link text</a>

This way you only have to attach on event listener to the parent.