我正试图在vanilla JS中进行事件委托。我有一个像这样的容器内的按钮
<div id="quiz">
<button id="game-again" class="game-again"><span class="icon-spinner icon"></span><span>Go again</span></button>
</div>
在David Walsh's nice instructions之后,我正在向按钮的祖先添加一个事件处理程序,如下所示:
this.container.addEventListener('click', function(e){
if (e.target && e.target.id == 'game-again') {
e.stopPropagation();
self.publish('primo:evento');
}
});
this.container是#quiz元素。这有一半的时间,但其余的时间click事件的目标是按钮内的跨度之一,所以我的事件处理程序不会被调用。处理这种情况的最佳方法是什么?
替代解决方案:
向所有嵌套子元素添加一个类(.pointer-none
)
/* css */
.pointer-none {
pointer-events: none;
}
你的加价成了
<div id="quiz">
<button id="game-again" class="game-again">
<span class="icon-spinner icon pointer-none"></span>
<span class="pointer-none">Go again</span>
</button>
</div>
如果指针设置为none,则不会在这些元素上触发click事件。
https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
较新的浏览器支持.matches
:
this.container.addEventListener('click', function(e){
if (e.target.matches('#game-again,#game-again *')) {
e.stopPropagation();
self.publish('primo:evento');
}
});
你可以得到没有前缀的版本
var matches = document.body.matchesSelector || document.body.webkitMatchesSelector || document.body.mozMatchesSelector || document.body.msMatchesSelector || document.body.webkitMatchesSelector
然后使用.apply
获取更多浏览器(仍然是IE9 +)。
假设你必须支持旧的浏览器,你可以走DOM:
function hasInParents(el,id){
if(el.id === id) return true; // the element
if(el.parentNode) return hasInParents(el.parentNode,id); // a parent
return false; // not the element nor its parents
}
但是,这将爬上整个dom,你想停在代表团的目标:
function hasInParentsUntil(el,id,limit){
if(el.id === id) return true; // the element
if(el === limit) return false;
if(element.parentNode) return hasInParents(el.parentNode,id); // a parent
return false; // not the element nor its parents
}
哪个,会使你的代码:
this.container.addEventListener('click', function(e){
if (hasInParentsUntil(e.target,'game-again',container)) { // container should be
e.stopPropagation(); // available for this
self.publish('primo:evento');
}
});