将JS点击事件捕获下移到SVG而不是按钮

Question

当我在按钮上创建点击事件监听器时，如果 SVG 在按钮内被点击，事件目标将是<use xlink:href="#star-filled"></use>而不是注册了点击事件的元素。

我该如何防止它捕获子元素作为目标元素？

HTML

<button type="button" class="rp-form-rating-btn">
  <svg class="rp-star-icon rp-star-four" data-rating="4">
    <use xlink:href="#star-filled"></use>
  </svg>
</button>

JavaScript

var stars = document.querySelectorAll('.rp-form-rating-btn');

for (var i = 0; i < stars.length; i++) {
   stars[i].addEventListener('click', event => {
     console.log(event.target);
   }, false);
}

- Asa Carter

Answer 1

使用 currentTarget 来代替 target，捕获的目标是 button 而不是 svg。

currentTarget 可以让你获取你所点击的 元素！

来自 MDN：currentTarget 总是引用事件处理程序所附加的元素，而不是指示事件发生在哪个元素上的 Event.target，后者可以是其后代元素。

在线演示:

var stars = document.querySelectorAll('.rp-form-rating-btn');

stars.forEach(function(stars) {
  stars.addEventListener('click', function(event) {
    console.log(event.currentTarget);
  }, false);
})

<button type="button" class="rp-form-rating-btn">
  <svg class="rp-star-icon rp-star-four" data-rating="4">
    <use xlink:href="#star-filled"></use>
  </svg>
</button>

- Always Helping