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

【问题标题】：jquery toggle triggers twice on child element?jquery toggle 在子元素上触发两次？
【发布时间】：2012-09-17 18:54:48
【问题描述】：

我的页面上有一个 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（减去图像）会正确滑出菜单，再次单击它（包括图像）或页面上的其他任何地方都可以正常工作，但在下拉菜单时单击图像down is hidden 切换两次（您可以看到它滑出并再次滑入）。

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

【问题讨论】：

event.stopPropagation() 是你需要的api.jquery.com/event.stopPropagation
代码中的$("#dropdown") 元素是什么？另外，你为什么使用内联 JavaScript？
您是在幻灯片动画完成之前点击图像吗？如果是，请尝试使用$("#dropdown").stop(true, true).slideDown(400); 和$("#dropdown").stop(true, true).slideDown(400);？同时摆脱内联脚本并将其移至处理程序代码。
@wirey $("#dropdownarrow").click(function(e){e.stopPropagation();});导致它根本不调用切换。
@Vega 不，如果单击一次，#dropdown 会向下滑动然后再次向上滑动。我摆脱了内嵌的 javascript。没有解决任何问题，但感谢您了解我的标准做法。

标签： jquery show-hide

【解决方案1】：

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

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

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

【讨论】：

是的。具体来说，在toggledropdown() 调用上方#menu 的单击绑定中。像这样： $("#menu").click(function(e) { e.stopPropagation(); toggledropdown(); });