Question

我在页面上有一些动态创建的菜单，只要用户点击页面上的任何位置，就需要隐藏这些菜单。如果用户单击菜单或尝试打开另一个菜单，则需要这样做。

我还希望事件处理程序在完成隐藏时取消绑定。我找到了使用document.on()一个one()的解决方案，但我真的想将document处理程序限制在DOM的下方。问题是它破坏了我的代码。

对优雅解决方案的任何帮助表示赞赏。

我想要这样做的主要原因是能够阻止event propagation，例如：

Succeeding propagation, failing one() clickhandler DEMO

的Javascript

// I want to change "document" to ".menus" here
$(document).on("click", ".displayMenu", function(e)
{
    var $menu =  $(this).siblings(".menu");
    $(document).one("click", function(e2) 
       {
           if (e.target!=e2.target)
               $menu.hide(); 
       });
    $menu.toggle();
});

HTML

<div class="menus">
    <div>
        <div class="displayMenu">Show menu 1</div>
        <div class="menu">menu 1</div>
    </div>
    <div>
        <div class="displayMenu">Show menu 2</div>
        <div class="menu">menu 2</div>
    </div>
</div>

Answer 1

感谢@TapanC，我意识到我在stopPropagation()时犯了一个明显的错误，当然它应该阻止document.one()事件的触发。我不明白为什么即使没有document.one()，stopPropagation() 仍然无法运行，但这是一个有效的解决方案。

虽然不完全优雅（我不喜欢全局hide()命令）所以任何更好的建议都值得赞赏！：）

Working (unpretty) solution DEMO

$(".menus").on("click", ".displayMenu", function(e)
{
    // Hide all
    $(".menu").hide();
    // Get current menu
    var $menu =  $(this).siblings(".menu").show();
    $(document).one("click", function(e2) 
       {
           if (e.target!=e2.target)
               $menu.hide(); 
       });
    // Prevent propagation
    e.stopPropagation();
});

在页面jquery上的任意位置单击隐藏动态创建的菜单

1 个答案: