• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

Add event listener to all links

How can I add an onclick event listener to all links on a page, not using jquery etc.
0
Gary
Asked:
Gary
  • 3
  • 2
1 Solution
 
SamuelShawCommented:
You can use document.GetElementsByTagName to get all the "a" elements and loop through them. If you want to be more thorough, you'll check that they have a value for the "href" attribute before binding your event.
var linkList = document.getElementsByTagName("a");
for (var nIndex = 0; nIndex < linkList.length; ++nIndex) {
	var sTarget = linkList[nIndex].getAttribute("href");
	if (sTarget != "") {
		linkList[nIndex].onclick = function () {
		// Do what you want to do when clicking a link
		};
	}
}

Open in new window

0
 
GaryAuthor Commented:
That works but it overwrites any existing onclick events
0
 
SamuelShawCommented:
Right. Define the onClick function separately and try the following:
if (linkList[nIndex].addEventListener) {
	linkList[nIndex].addEventListener("click", MyOnClickHandler, false);
} else if (linkList[nIndex].attachEvent) {
	linkList[nIndex].attachEvent("onclick", MyOnClickHandler, false);
} else {
	if ((linkList[nIndex].onclick != "") && (/;\s*$/.test(!linkList[nIndex].onclick)))
		linkList[nIndex].onclick += ";";
	linkList[nIndex].onclick += "MyOnClickHandler()";
}

Open in new window

0
 
GaryAuthor Commented:
I don't want to write an onclick event to every link, I just want to capture it when it is clicked.

Half solved it with this but its capturing all click events.
if (window.captureEvents){
window.captureEvents(Event.CLICK);
window.onclick=sourceCheck;
}
else
document.onclick=sourceCheck;

function sourceCheck(e){
var el=(typeof event!=='undefined')? event.srcElement : e.target
if(el.tagName=="A"){
// Do something
}
}
0
 
SamuelShawCommented:
That's right. You can put a document-wide onClick event and look for the original target element. It will capture all of the click events. You cannot capture just the A clicks without putting onClick handlers on all the A elements.
<script type="text/javascript">
function onClick(objEvent) {
	objEvent = objEvent || window.event;
	// IE and Chrome support objEvent.srcElement
	if (objEvent.srcElement)
		alert("IE/Chrome target = " + objEvent.srcElement.tagName);
	// FF and Chrome support objEvent.target
	else if (objEvent.target)
		alert("FF target = " + objEvent.target.tagName);
}
document.onclick = onClick;
</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now