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解僱。

在某些事件中，我確實有行
「event.stopPropagation（）;」
但這似乎什麼都不做。

Answer 1

更改內嵌的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 
    } 
} 

這將觸發處理程序，除了那些上的複選框的任何點擊。

Answer 2

如果事件冒泡模型，事件傳播是從內部元素到外部元素。

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