通过单击页面中的任何位置隐藏菜单答案

【问题标题】：Hiding menu by clicking any where in the page通过单击页面中的任何位置隐藏菜单
【发布时间】：2012-09-04 22:48:35
【问题描述】：

我有这段代码，但它似乎总是触发附加到'html' 的事件，因为当我点击.optTrigger 然后菜单显示，然后再次点击它，它会闪烁的东西，它隐藏了菜单一秒钟并再次显示它，所以我猜它会触发'html' 点击事件。

试一试：这是网站上传的，你要添加一个新任务，然后点击选项触发器，它是新任务中检查按钮旁边的箭头按钮，最右边。 HERE

这是我的代码：

html：

<div class="mainTaskWrapper clearfix">
    <div class="mainMarker"></div>
    <label class="mainTaskLabel"></label>
    <div class="mainHolder"></div>
    <div class="subTrigger opened"></div>
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <div class="addSubButton"></div>
    <div class="dateInfo"></div>
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>
    </div>
</div>

脚本：

$("#tasksWrapper").on("click", ".mainTaskWrapper .optTrigger", function(evt){
    $(this).siblings(".mainOptions").fadeToggle(100);
    $(this).toggleClass("active");
    evt.stopPropagation();      
});

$("html").on("mousedown",function(){            
    $(".optTrigger").siblings(".mainOptions").hide();
    $(".optTrigger").removeClass("active");
});

【问题讨论】：

能否提供 HTML 供参考？
@Nate 我已经编辑了问题。
我无法理解你的问题。请在jsfiddle.net 创建一个示例
@Rafael 你真的必须在每次有人点击.optTrigger div 时添加一个new mousedown 事件处理程序吗？
@raina77ow 嗯，我正在考虑将其移出，我已经编辑了上面的代码。但问题仍然存在。谢谢。

标签： jquery events drop-down-menu event-bubbling stoppropagation

【解决方案1】：

问题在于将不同类型的事件处理程序附加到 DOM 元素：

$("#tasksWrapper").on("click", ...
...
$("html").on("mousedown", ...

即使click 事件的传播被阻止，点击也会触发mousedown 事件。

所以比起$("html").on("mousedown", ... 更好的是$("html").on("click", ...

【讨论】：