Question

我有一个包含div的列表，点击它们可以展开它们下面的div。这工作得非常好。现在我想为可点击的div添加一个复选框，但每次单击该复选框时它会触发放置它的div的功能，这会使div在检查框的同时展开，反之亦然。我想检查并取消选中该框而不触发它背后的div。 Expandable divs

Answer 1

您需要在复选框的点击回调中添加event.stopPropagation()。这样可以防止点击事件冒泡到div。

一个例子：

$('input:checkbox').on("click", function(event) {
    // Do something here
    event.stopPropagation();
});

Answer 2

这是一种hacky方式，但它可能会起作用：

<script>

    var prevent_div_click = false;

    $(function(){

        $('#div-id').on('mouseenter', '#checkbox-id', function(){
            prevent_div_click = true;
        });

        $('#div-id').on('mouseleave', '#checkbox-id', function(){
            prevent_div_click = false;
        });

        $('#div-id').click(function(){
            if(!prevent_div_click){
                // do your stuff
            }
        });

    });

</script>

防止div内的复选框触发divs函数

2 个答案: