div的事件時，點擊複選框在Chrome

Question

我結合對元件中的兩個事件，如下面總是叫：

<div class="view"> 
    <input type="checkbox" class="edit"> 
</div> 

$(function(){ 
    $(".view").bind('dblclick', show1); 
    $(".edit").bind('click',show2); 
}); 

function show1(){ 
    console.info('here'); 
} 

function show2(){ 
    console.info('hi'); 
} 

這是在Firefox正常的，但在Chrome，div的事件總是被調用時，點擊複選框。

FYI：http://jsfiddle.net/dMcnJ/1/

Answer 1

$(function(){ 
    $(".view").bind('dblclick', show1); 
    $(".edit").bind('click',show2); 
    // Disable event bubbling on dblclick 
    $(".edit").bind('dblclick',function(e) { e.stopPropagation();}); 
}); 

function show1(){ 
    console.info('here'); 
} 

function show2(event){ 
    event.stopPropagation(); 
    console.info('hi'); 
} 

http://jsfiddle.net/dMcnJ/9/

Answer 2

這就是所謂的事件冒泡。執行以下操作：

function show2(e){ 
    e.stopPropagation(); 
    console.info('hi'); 
}