Question

我试着通过使用jquery点击它来使div'活跃'。但在div中，有一个复选框。每当我点击div中除了复选框之外的任何内容时，我希望div变为活动状态。我已经这样做了，但是复选框现在没有响应点击事件（即当我点击它时它没有被选中/取消选中）。

http://jsfiddle.net/U7VmV/3/

 $(document).ready(function(){
    $('.c-video').click(function(){
        $('.c-video').removeClass('active');
        $(this).addClass('active');
    });
}).children().find('label').click(function(e){
    return false;
});

Answer 1

使用event.stoppropagation()

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

}).find('label').click(function (e) {
    e.stopPropagation();
});

Fiddle Demo

Answer 2

当return false阻止事件传播时，您必须阻止事件的传播，但它也会阻止正在检查/取消选中复选框的Click事件的默认操作。

相反，或者在事件对象中返回false stopPropagation()

$(document).ready(function(){
    $('.c-video').click(function(){
        $('.c-video').removeClass('active');
        $(this).addClass('active');
    });
}).children().find('label').click(function(e){
    e.stopPropagation()
});

演示：Fiddle

Answer 3

另一种方法是检查点击的事件目标：

var $cVideo = $('.c-video').on('click', function(e) {
    if (e.target.tagName != 'INPUT' && e.target.tagName != 'LABEL') {
        $cVideo.removeClass('active');
        $(this).addClass('active');
    }
});

http://jsfiddle.net/U7VmV/4/

从div的.click（）中排除复选框

3 个答案: