使用event.stopPropagation（）

Question

我有使用event.stopPropagation（）與下面的JavaScript代碼

<li onclick="test();"> 
    <div> 
    <span onclick="test2();">click</span> 
</div> 
</li> 

雖然點擊跨度它會打開一個燈箱（jQuery的顏色框）的一些內容，但該問題的問題這裏是當我點擊跨度它打電話<li>首先onclick，我已經試過event.stopPropagation()但它看起來不適合我，任何人都可以請告訴我如何做到這一點？

Answer 1

問題是你不使用jQuery綁定事件。

您需要使用jQuery綁定它們才能訪問正確擴展的Event對象，該對象包含適用於所有瀏覽器的此方法。

Answer 2

您應該始終將動態功能與內容分開。因此，正如每個其他用戶在這裏告訴你的，將你的事件函數綁定到你希望它們操作的html元素上。它並不難

 jQuery(document).ready(function($) 
     { 
     $("li").bind("click", text) 
     $("span").bind("click", text2); 

     }); 

Answer 3

試試這個http://jsfiddle.net/GratT/

$('li').click(function(){ 
    alert('li clicked'); 
}); 


$('span').click(function(e){ 
    alert('span clicked'); 
    e.stopPropagation(); 
}); 

Answer 4

有2種在現代瀏覽器（「捕獲」和「沸騰」）和泡沫，這取決於你的瀏覽器事件捕獲方法正在使用。我可能是錯的，但據我記得當Mozilla瀏覽器使用「捕獲」的方法，而IE瀏覽器正在使用「冒泡」。 區別在於「捕獲」方法從父項到子項啓動事件鏈，這意味着父項事件將首先觸發，並且子元素將最後觸發（這發生在您的案例中）。你需要在這裏設置你的事件類型爲Bubble。要做到這一點，你需要刪除的onclick財產，將其替換爲：

<li id="lst"> 
    <div> 
    <span id="spn">click</span> 
</div> 
</li> 


var element1 = document.getElementById('lst'); 
var element2 = document.getElementById('spn'); 

element1.addEventListener('click',doSomething1,false); 
element1.addEventListener('click',doSomething2,false); 

其中doSomething1和doSomething1是函數指針; 你也可以使用jQuery的事件綁定，它有它自己的事件綁定功能，默認情況下它們被設置爲冒泡，但是你可以關閉冒泡，它會使用捕捉方法，而不是

這裏是一個有用的文章

http://www.quirksmode.org/js/events_order.html