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

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

仅供参考：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');
}