JS单击事件捕获到SVG而不是按钮

【问题标题】：JS Click Event Capturing down to SVG instead of buttonJS单击事件捕获到SVG而不是按钮
【发布时间】：2020-08-25 11:15:24
【问题描述】：

当我在按钮上创建点击事件监听器时，如果在按钮内部点击了 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);
}

【问题讨论】：

标签： javascript event-bubbling

【解决方案1】：

使用currentTarget 而不是target 来捕获button 而不是svg

currentTarget 将允许您获取您点击的element！

来自 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>

【讨论】：