防止通过父元素处理程序触发处理程序
我想防止UL事件触发。我认为这可以使用它的父容器中的stopImmediatePropagation来完成吗？
html
<div>
<ul>
<li>click me</li>
<li>click me</li>
<li>click me</li>
<li>click me</li>
<li>click me</li>
</ul>
</div>javascript
$('body').on('click', 'div', function(e) {
e.stopImmediatePropagation();
$('div').css('background', 'black');
});
$('body').on('click', 'ul', function() {
$('ul').css('background', 'yellow');
});http://jsbin.com/yositusega/edit?html,css,js,output -如果您单击UL，我希望它能够触发div事件，而不是ul。因此，在这个例子中，UL背景不应该改变颜色，但是父DIV应该改变颜色。那么黑>深红。
这可以通过DIV事件处理程序来完成吗？如果可能的话，不需要编辑UL事件。
回答 1
Stack Overflow用户
发布于 2016-03-27 14:36:00
解释
- 将事件侦听器放在父级(即
ul)上 - 在事件处理程序(
eventSignal())中，通过确定event.targetCurrent(即ul)来确定event.targetCurrent - 在事件处理程序的末尾使用
event.stopPropagation()。
参考文献
- MDN EventPhase*
- W3Schools EventPhase
- 多重EventListeners
*在文章的末尾，有一个演示可能会有所帮助
片段
还有一个额外的实用程序函数evPhase()，我刚动态添加了它。我不确定它是否正常工作，但它并不妨碍主函数eventSignal()。在观察了相位之后，我相信evPhase()是准确的，但是没有足够的细节来显示BUBBLING_PHASE永远不会到达<ul>，因为event.stopPropagation()...maybe，如果它取代了event.stopImmediatePropagation()，eventPhase可能是NONE。否则它会扼杀整个过程因为event.target不是event.currentTarget..。
无论如何，如果单击<li>周围的空间，则单击的是<ul>而不是<li>。注意，eventPhase是：
AT_TARGET - The event flow is in target phase, i.e. it is being evaluated at the event target
所以看起来event.stopPropagation()停止了BUBBLING_PHASE，因为如果事件冒泡到<ul>的程度，那么evPhase()就不会报告AT_TARGET了。
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
eventSignal(event);
evPhase(event);
}, false);
function eventSignal(event) {
evPhase(event);
if (event.target !== event.currentTarget) {
var tgt = event.target;
tgt.classList.toggle('on');
tgt.classList.toggle('off');
}
event.stopPropagation();
evPhase(event);
}
function evPhase(event) {
var display = document.querySelector('output');
var phase = event.eventPhase;
switch (phase) {
case 0:
display.innerHTML += 'NONE<br/>';
break;
case 1:
display.innerHTML += 'CAPTURING_PHASE - The event flow is in capturing phase<br/>';
break;
case 2:
display.innerHTML += 'AT_TARGET - The event flow is in target phase, i.e. it is being evaluated at the event target<br/>';
break;
case 3:
display.innerHTML += 'BUBBLING_PHASE - The event flow is in bubbling phase<br/>';
break;
default:
return false;
}
}li {
list-style: none;
width: 24px;
height: 24px;
border: 3px outset grey;
border-radius: 50px;
cursor: pointer;
text-align: center;
font-size: 21px;
}
.on {
background: yellow;
color: blue;
border-color: blue;
}
.off {
background: #fd8;
}<div>
<ul>
<li class="off">1</li>
<li class="off">2</li>
<li class="off">3</li>
<li class="off">5</li>
<li class="off">6</li>
</ul>
</div>
<output></output>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
https://stackoverflow.com/questions/36247446
复制相似问题
腾讯云开发者
