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');
}

在Chrome中单击复选框时始终调用div的事件

2 个答案: