我正在尝试将 addEventListener
click
与两个具有相同 class
的按钮一起使用,但它不起作用!
这是 html :
<div class="share-block">
<a href="#" class="btn-rounded share-btn"><i class="fa fa-share-alt fa-2x"></i></a>
<div class="social-block">
<a href="http://facebook.com/share" class="btn-rounded btn-sm social-btn btn-fb"><i class="fa fa-facebook"></i></a>
<a href="http://twitter.com/share" class="btn-rounded btn-sm social-btn btn-tw"><i class="fa fa-twitter"></i></a>
</div>
</div>
这是 javascript代码:
var socialBtns = document.getElementsByClassName('social-btn');
for (var i = 0; i < socialBtns.length; i++) {
socialBtns[i].addEventListener('click', function(event) {
window.open(socialBtns[i].href, "Share", "width=600,height=400");
event.preventDefault();
});
}
最佳答案
在您的事件处理程序上使用 this.href
而不是在 for 循环中引用 socialBtns
变量:
var socialBtns = document.getElementsByClassName('social-btn');
for (var i = 0; i < socialBtns.length; i++) {
socialBtns[i].addEventListener('click', function(event) {
window.open(this.href, "Share", "width=600,height=400");
event.preventDefault();
});
}
您还可以通过在 for 循环之外创建事件处理程序来改进现有代码:
var socialBtns = document.getElementsByClassName('social-btn');
for (var i = 0; i < socialBtns.length; i++) {
socialBtns[i].addEventListener('click', openSocialLink);
}
function openSocialLink(event) {
window.open(this.href, "Share", "width=600,height=400");
event.preventDefault();
}
关于javascript - addEventListener 不通过 getElementsByClassName 处理多元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47335715/