Question

我的页面上有一个div（id =“menu”），其中onclick =“toggledropdown（）”。这个div有子img元素和文本。当点击图像以外的任何内容时，切换代码可以正常工作。但是，单击图像时，div会向下滑动，然后再次向上滑动。

切换代码：

function toggledropdown()
{
    if ($("#dropdown").is(":hidden"))
    {   
        $("#dropdown").slideDown(400);      
    }
    else
    {
        $("#dropdown").slideUp(50);     
    }
}

body.click可在单击页面时隐藏下拉列表：

$(document.body).click(function(event)
{
    var targetID = $(event.target).attr("id");
    if (targetID !== "dropdown" && targetID !== "menu")
    {
        if (!$("#dropdown").is(":hidden"))
            toggledropdown();
    }
});

drop down.click以取消body.click

$("#dropdown").click(function(e)
{
    e.stopPropagation();
});

html div（与省略问题无关的一些事情）：

<div class="menu" id="menu" onclick="toggledropdown();">
    <img id="dropdownthumbnail" (blahsrc/styleblah) />
    Text
    <img id="dropdownarrow" (blahsrc/styleblah) />
</div>

因此，重申一下，单击菜单div（减去图像）可以正确地滑出菜单，再次单击它（包括图像）或页面上的任何其他位置都能正常工作，但在下拉时单击图像隐藏向下切换两次（你可以看到它滑出并重新进入）。

孩子是否会触发父母的onclick两次？一次为孩子，一次为父母？为什么？如何使其按预期工作：单击div上的任何位置会触发onclick一次？

Answer 1

您需要使用event.stopPropagation来阻止事件冒泡。

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

这将阻止父处理程序触发其事件

jquery toggle在子元素上触发两次？

1 个答案: