阻止处理程序通过父元素处理程序触发

Question

我想阻止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应该改变颜色。那么黑＆gt;深红色。

这可以通过DIV事件处理程序完成吗？如果可能，我们不想编辑UL活动。

Answer 1

解释

• 将事件监听器放在父级（即ul）
上
• 在事件处理程序（eventSignal()）中，通过确定event.target（event.targetCurrent）确定ul
• 在事件处理程序结束时使用event.stopPropagation()。

参考

• MDN EventPhase *
• W3Schools EventPhase
• Multiple EventListeners

*在文章末尾有一个可能有帮助的演示

片段

我刚刚添加了额外的实用功能evPhase()。我不确定它是否正常运行，但它并不妨碍主要功能eventSignal()。在观察了相位后，我认为evPhase()是准确的，但由于BUBBLING_PHASE而没有足够的细节向您显示<ul>永远不会达到event.stopPropagation()。 。如果它被event.stopImmediatePropagation()替换eventPhase可能是NONE ..或者它会杀死整个过程，因为event.target不是event.currentTarget {1}} ...

无论如何，如果您点击<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 }。

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;