我在父级中有一组按钮。每个都包含一个以编程方式添加的 SVG 图标。我正在尝试监听父元素,然后使用事件委托(delegate)为特定按钮触发不同的功能,但最终发生的是我获得了包含的 svg 或路径的事件目标,而不是按钮本身。有没有办法利用事件冒泡,或者改变我这样做的方式来避免添加大量的事件处理程序,并触发我需要的事件?这是一些简化的代码:
<div class="parent">
// I have a whole lot of these added to the page programmatically
<button class="some-unique-class">
<svg> //... </svg>
</button>
</div>
然后在我的 JavaScript 中:
document.querySelector('.parent').addEventListener('click', function(event) {
//.. I always want to trigger events on the buttons, not
// on the svg's and their paths.
});
使用 JQuery,我可以通过监听父元素然后指定该元素轻松地做到这一点,但我想在 vanilla JS 中做到这一点。
如有任何帮助,我们将不胜感激。
最佳答案
我想最简单的方法是使用像 jquery 的 closest
这样的函数:
function closest(elem, selector) {
do {
if(elem.matches(selector)) return elem;
elem = elem.parentNode;
} while(elem);
}
document.querySelector('.parent').addEventListener('click', function(e) {
var btn = closest(e.target, 'button');
btn.style.backgroundColor = 'red';
});
<div class="parent">
<button class="some-unique-class">
<b>hey</b>
</button>
<button class="some-unique-class">
<b>hey</b>
</button>
</div>
关于javascript - 在按钮中使用 addEventListener 和嵌套元素的事件委托(delegate)模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36121179/