JavaScript事件冒泡

Question

我有这样的设置

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

当用户点击复选框时，我不希望触发SomeEvent。在SomeEvent事件中，我使用了"event.stopPropagation();"这一行代码，但似乎没有任何效果。

- John Soer

---

如果在内联事件监听器中使用，则SomeEvent必须为SomeEvent()（不应使用内联事件监听器）。 - connexo

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

- Felipe Brahm

---

我不喜欢必须添加代码来防止复选框被点击。 - John Soer

这只是一个快速的例子，但如果您正在使用JQuery，正确的做法是使用类似于$('#element1 input').click(stopPropagation())的东西。我会更新我的答案。 - Felipe Brahm

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

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

- RightSaidFred

---

我喜欢这个潜力，因为我可以将每个事件限制在一个方法中。然而，我正在使用jQuery来附加事件。在附加的事件中，event.target.id和event.srcElementid始终为空。而this.id则返回正确的id。 - John Soer