0

我在页面上有一些动态创建的菜单，每当用户单击页面上的任何位置时都需要隐藏这些菜单。如果用户单击菜单或尝试打开另一个菜单，这需要工作。

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

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

我想这样做的主要原因是能够防止event propagation以下情况：

传播失败DEMO

传播成功，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>​
4

1 回答 1

0

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

虽然并不完全优雅（我不喜欢全局hide()命令），所以任何更好的建议表示赞赏！:)

工作（不漂亮）解决方案演示 

$(".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();
});
于 2012-11-09T09:37:55.843 回答