Legacy Browsers
.target
returns the element that was clicked on. In the case of link 2, this will always be the span
tag; on a properly formed version of link 3 sometimes it would be the a
tag, sometimes it would be the img
tag depending where you click. In order to figure out if the .target
is inside of an a
tag you need to climb up the DOM tree using parentNode
until you reach an a
node or the document itself, which has a .parentNode
of null
.
var getParentAnchor = function (element) {
while (element !== null) {
if (element.tagName && element.tagName.toUpperCase() === "A") {
return element;
}
element = element.parentNode;
}
return null;
};
document.querySelector("body").addEventListener('click', function(e) {
var anchor = getParentAnchor(e.target);
if(anchor !== null) {
console.log(anchor.textContent);
}
}, false);
<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="example.jpg">Link 3</a>
<div>
Non link text
</div>
The standard .textContent
should be preffered over .text
.
It's easier to use querySelector
to grab the body, unless you need to support IE7 or less.
Modern Browsers
If you don't need to support older browsers like IE or Opera mini, the code can be simplified by using the Element.closest
method. You can completely get rid of the getParentAnchor
and replace it with a single .closest
call, shortening the code quite a bit:
document.querySelector("body").addEventListener('click', function(e) {
var anchor = e.target.closest('a');
if(anchor !== null) {
console.log(anchor.textContent);
}
}, false);
<a href="#">Link 1</a>
<a href="#"><span>Link 2</span></a>
<a href="#"><img src="example.jpg">Link 3</a>
<div>
Non link text
</div>