Javascript事件冒泡

我有这个设置

<div onclick="SomeEvent">
    <input type=checkbox value=1>1
    <input type=checkbox value=2>2
    <input type=checkbox value=3>3
</div>

当用户单击复选框时我不希望SomeEvent被触发的问题.

在某些情况下,我确实有这条线
“event.stopPropagation();”
但这似乎什么都不做.

解决方法:

在冒泡模型中,事件传播是从内部元素到外部元素.

这意味着event.stopPropagation();应该在输入’事件而不是div.

<div onclick="SomeEvent">
  <input type=checkbox value=1 onclick="stopPropagation()">1
  <input type=checkbox value=2 onclick="stopPropagation()>2
  <input type=checkbox value=3 onclick="stopPropagation()>3
</div>

现在的Javascript代码：

function stopPropagation() {
  //... do something.
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
}

更多信息：http://www.quirksmode.org/js/events_order.html

编辑：上面是一个快速的方式来展示冒泡模型是如何工作的,但使用JQuery解决这个问题的更好的答案是：

<div id="mydiv">
  <input type="checkbox" value="1" /> 1
  <input type="checkbox" value="2" /> 2
  <input type="checkbox" value="3" /> 3
</div>

现在的Javascript代码：

$('#mydiv').click(function(e) {
  //do something
});

$('#mydiv input').click(function(e) {
  //stop propagation:
  if (!e) var e = window.event;
  e.cancelBubble = true; //IE
  if (e.stopPropagation) e.stopPropagation(); //other browsers
});

标签：javascript,event-bubbling
来源： https://codeday.me/bug/20190716/1482920.html