div 事件冒泡答案

【问题标题】：Div event bubblingdiv 事件冒泡
【发布时间】：2016-10-29 14:08:01
【问题描述】：

我的项目中有一个窗口单击事件监听器和一些 div 元素上的单击事件。如果我单击 div，则此 div 元素上的单击事件（正确）并且窗口单击 eventListener 触发（不正确）。

我可以冒泡窗口点击事件监听器不触发事件的div元素吗？

为了更好的演示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>

我希望有人可以帮助我。

【问题讨论】：

需要绑定到window上的mouseup吗？或click?

标签： javascript jquery events event-bubbling event-capturing

【解决方案1】：

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

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

【讨论】：

感谢您的回答，但我试过了，但它不起作用。如果我点击按钮，窗口 eventListener 就会触发。
需要绑定到window上的mouseup吗？或click?
我不知道绑定是什么意思，但我需要窗口上的点击事件监听器。我只需要 div 元素上的其他事件。
您在此处指定mouseup window.addEventListener('mouseup', onDocumentMouseUp, false); 而不是click window.addEventListener('click', onDocumentMouseUp, false)。如果您使用click，我的回答会奏效。如果可以，请考虑接受它