Question

我有一个概述列表，包含div，并且每个div都有一对，其中包含所有细节。如果您单击“介绍”div，则详细对将打开，并且介绍将被隐藏。 Eeach div有一个复选框。我遇到了一个问题，如果我点击“介绍”div的复选框，详细的div将会打开，因为click事件也会发生在intro div上。我提出了一个解决方案，比如，使用外部跨度，我存储所有打开的div ID。

<div class="divIntroHolder" id="divIntroHolder15">
            <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage" id="chkMessage15"/></span>

        </div>

        <div class="divDetailHolder" id="divDetailHolder15">
            <div class="divPicContainer">
                <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage"/></span>
            </div>
        </div>

为此我有一个像这样的js

$(document).ready(function () {
$(".divIntroHolder").click(function () {
    var id = getId($(this).attr("id"));
    if (!isOpen("spanOpenDivs", id)) { //check if the div is open or not
        addTo("spanOpenDivs", id); // add to span
        $(this).hide();
        $("#divDetailHolder" + id).show();
    } else {
        removeFrom("spanOpenDivs", id); //remove from the span
    }
});

$(".chkMessage").click(function () {
    var id = $(this).val();
    //prevent opening the detailed div
    if (!isOpen("spanOpenDivs", id))
        addTo("spanOpenDivs", id);

    var clicked = $(this);
    $(".chkMessage").each(function () {
        if ($(this).val() == id) {
            $(this).attr("checked", clicked.attr("checked"));
        }
    });
 });

});

它使js有点复杂，我认为必须有一种更简单的方法来挑出复选框点击事件。如果选中或取消选中复选框，则无关紧要，但它应该只过滤掉click事件。

如果有人对这个问题有一个简单的解决方案，那么会很感激=）

Answer 1

$(".chkMessage").click(function (evt) {
    evt.stopPropagation();
    ...
}

jQuery event.stopPropagation()

如何在内部容器中单击复选框单击事件？

1 个答案: