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

问题描述

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

解决方法

使用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>

event-bubbling javascript