javascript - Chrome 中单击复选框时总是调用 div 的事件

Question

我在元素上绑定(bind)两个事件，如下所示:

<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 的事件总是在单击复选框时调用。

仅供引用: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/