最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - LIsten for a click on a link even if it's inside of a div or img - Stack Overflow

programmeradmin2浏览0评论

I use a click listener like this so that a click that goes to link.php will execute some code:

document.addEventListener('click', function(e) {    
    var tre = e.target.href || '';
    if( tre.indexOf("link.php") > -1) {
        alert('it worked');
    }
}, false);

This works:

<a href="/link.php?destination=1" target="_blank">
    link text
</a>

But clicks on images or divs don't:

<a href="/link.php?destination=1" target="_blank">
    <img src="/image.jpg">
    <span>link text</span>
</a>

since clicks are on the image and span, not the <a> tag. What's the simplest way to make this work?

I use a click listener like this so that a click that goes to link.php will execute some code:

document.addEventListener('click', function(e) {    
    var tre = e.target.href || '';
    if( tre.indexOf("link.php") > -1) {
        alert('it worked');
    }
}, false);

This works:

<a href="/link.php?destination=1" target="_blank">
    link text
</a>

But clicks on images or divs don't:

<a href="/link.php?destination=1" target="_blank">
    <img src="/image.jpg">
    <span>link text</span>
</a>

since clicks are on the image and span, not the <a> tag. What's the simplest way to make this work?

Share Improve this question edited Feb 3, 2016 at 20:51 Mr Lister 46.6k15 gold badges113 silver badges155 bronze badges asked Jan 29, 2016 at 19:13 pg.pg. 2,5316 gold badges44 silver badges69 bronze badges 1
  • 1 Since the span and img tags are wrapped inside the anchor tag, any click on those elements would trigger the event on anchor. Like this : jsfiddle/DinoMyte/cw96h622 – DinoMyte Commented Jan 29, 2016 at 19:23
Add a ment  | 

1 Answer 1

Reset to default 9

JavaScript does have a native .closest() method (although it is currently considered experimental and has limited browser support). You can use this method in order to get the closest a ancestor element (or the element itself, which means that it would work in both of the cases that you provided).

Example Here

document.addEventListener('click', function(e) {    
    var href = e.target.closest('a').href || '';
    if (href.indexOf("link.php") > -1) {
      // ...
    }
}, false);

Alternatively, you could check if each parent node is an a element:

Example Here

document.addEventListener('click', function(e) {
  var target = e.target

  while (target && target.tagName !== 'A') {
    target = target.parentNode;
    if (!target) { return; }
  }

  if (target.href.indexOf("link.php") > -1) {
    // ...
  }
}, false);

Another option is to attach the event listener directly to the a element and then access the currentTarget property in order to get the element that the event was attached to (rather than the element that triggered the event). However, that would only attach the event to a single a element:

Example Here

document.querySelector('a').addEventListener('click', function(e) {    
    var href = e.currentTarget.href || '';
    if (href.indexOf("link.php") > -1) {
      // ...
    }
}, false);
发布评论

评论列表(0)

  1. 暂无评论