Div 事件冒泡

Question

我的项目中有一个 window click eventListener 和 div 元素上的一些点击事件。如果我单击 div，此 div 元素上的单击事件（正确）和 window 单击 eventListener 触发（不正确）。

我可以冒泡 div 元素，window click eventListener 不会触发事件吗？

为了更好的演示 jsfiddle：

window.addEventListener('mouseup', onDocumentMouseUp, false);

function onDocumentMouseUp(event){
  alert('dont fire this event on button click')
}

$('#button').on({
  click: function (event) {
  alert('button click event');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button" style="height: 30px; width: 30px; background: blue"></div>

我希望有人能帮助我。

Answer 1

是的，您可以这样使用 event.stopPropagation()：

$('#button').on({
  click: function (event) {
        alert('button click event');
        event.stopPropagation();
  }
});

Div 事件冒泡

Div event bubbling

javascript

jquery

events

event-bubbling

event-capturing