Javascript 事件冒泡

Question

我有这个设置

1 2 3

用户单击复选框时的问题，我不想触发 SomeEvent。

在某些情况下，我确实有这条线
"event.stopPropagation();"
但这似乎什么也没做。

Answer 1

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

这意味着 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
});

Answer 2

将内联 onclick 更改为：

onclick="SomeEvent(this, event)"

然后在SomeEvent，执行以下操作：

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( el === target ) {
        // run your code
    }
}

这只会在您单击 div 元素本身而不是后代时触发代码。

如果还有其他后代应该触发处理程序，那么执行以下操作：

function SomeEvent( el, event ) {
    var target = event.srcElement || event.target;

    if( target.nodeName.toLowerCase() !== 'input' || !target.type || target.type !== 'checkbox' ) {
        // run your code
    }
}

这将触发除复选框之外的任何点击的处理程序。