如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。