Capturing all the click event
Andrew Mclaughlin 
I am thinking of to add a javascript function to capture all the <a> click events inside a html page.
So I am adding a global function that governs all the <a> click events, but not adding onclick to each (neither using .onclick= nor attachEvent(onclick...) nor inline onclick=). I will leave each <a> as simple as <a href="someurl"> within the html without touching them.
I tried window.onclick = function (e) {...}but that just captures all the clicks
How do I specify only the clicks on <a> and to extract the links inside <a> that is being clicked?
Restriction: I don't want to use any exra libraries like jQuery, just vanilla javascript.
211 Answers
Use event delegation:
document.addEventListener(`click`, e => { const origin = e.target.closest(`a`); if (origin) { console.clear(); console.log(`You clicked ${origin.href}`); }
});<div> <a href="#l1">some link</a> <div><a href="#l2"><div><i>some other (nested) link</i></div></a></div>
</div>[edit 2020/08/20] Modernized
0You can handle all click using window.onclick and then filter using event.target
Example as you asked:
<html>
<head>
<script type="text/javascript">
window.onclick = function(e) { alert(e.target);};
</script>
</head>
<body>
<a href="">google</a>
<a href="">yahoo</a>
<a href="">facebook</a>
</body>
</html>window.onclick = function (e) { if (e.target.localName == 'a') { console.log('a tag clicked!'); }
}your idea to delegate the event to the window and then check if the "event.target" is a link, is one way to go (better would be document.body). The trouble here is that it won't work if you click on a child node of your element. Think:
<a href="#"><b>I am bold</b></a>the target would be the <b> element, not the link. This means checking for e.target won't work. So, you would have to crawl up all the dom tree to check if the clicked element is a descendant of a <a> element.
Another method that requires less computation on every click, but costs more to initialize would be to get all <a> tags and attach your event in a loop:
var links = Array.prototype.slice.call( document.getElementsByTagName('a')
);
var count = links.length;
for(var i = 0; i < count; i++) { links[i].addEventListener('click', function(e) { //your code here });
}(PS: why do I convert the HTMLCollection to array? here's the answer.)
1You need to take into account that a link can be nested with other elements and want to traverse the tree back to the 'a' element. This works for me:
window.onclick = function(e) { var node = e.target; while (node != undefined && node.localName != 'a') { node = node.parentNode; } if (node != undefined) { console.log(node.href); /* Your link handler here */ return false; // stop handling the click } else { return true; // handle other clicks }
}See e.g.
You can also try using this:
var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) { link.onclick = function () { console.log('Clicked'); }
});It works, I just tested!
Working Demo:
Somewhere in comments you mentioned you want to get the 'href' value you can do that with this:
var forEach = Array.prototype.forEach;
var links = document.getElementsByTagName('a');
forEach.call(links, function (link) { link.onclick = function () { console.log(link.href); //use link.href for the value }
});Demo:
Try jQuery and
$('a').click(function(event) { *your code here* });In this function you can extract href value in this way:
$(this).attr('href')Some accepted answers dont work with nested elements like: <a href="..."><font><u>link</u></font></a>
There is a basic solution for most cases:
var links = document.getElementsByTagName('a');
for(var i in links)
{ links[i].onclick = function(e){ e.preventDefault(); var href = this.href; // ... do what you need here. }
}If anybody is looking for the typed version (TypeScript, using Kooilnc's answer), here it is:
document.addEventListener("click", (e: Event) => { if(!e.target) { return; } if(!(e.target instanceof Element)) { return; } const origin = e.target.closest("a"); if(!origin || !origin.href) { return; } console.log(`You clicked ${origin.href}`);
});I guess this simple code will work with jquery.
$("a").click(function(){ alert($(this).attr('href'));
});Without JQuery:
window.onclick = function(e) {
if(e.target.localName=='a') alert(e.target);
};The above will produce the same result.
2Very simple :
document.getElementById("YOUR_ID").onclick = function (e) {...} The selector is what you want to select so lets say you have button called
<a href="#">Button1</a>The code to capure this is:
document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }Hope that helps.
1
