0

我的页面上有一个 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();
    }
});

下拉。单击以否定正文。单击

$("#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（减去图像）会正确滑出菜单，再次单击它（包括图像）或页面上的任何其他位置都可以正常工作，但是在隐藏下拉菜单时单击图像切换两次（您可以看到它滑出并再次滑入）。

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

4

1 回答 1

0

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

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

这将阻止父处理程序触发他们的事件

于 2012-09-18T21:31:48.470 回答