Question

当你打开带有选项，帮助和注销的菜单时，我想创建一个类似于facebook的效果。它以这种方式工作。

无论您点击该菜单以外的页面，它都会关闭。我试过这个

$("body").not("#myMenu").click(function() {
   // hide menu
});

但这失败了，因为当我点击它时它会隐藏隐藏菜单。可能是什么问题以及如何解决它？

可能还有其他想法如何处理？

Answer 1

我认为这篇文章可以帮助你：

How do I detect a click outside an element?

关键是stopPropagation()。

Answer 2

将事件处理程序添加到正文中的每个元素都会非常过分。我会在z-order 10的内容之上使用DIV覆盖，并将窗口放在z-order 20的顶部。你需要的是DIV覆盖上的单个事件处理程序，它将是完整大小的浏览器窗口。

Answer 3

您可以使用Ben Alman’s jQuery clickoutside plugin。例如：

// Hide the modal dialog when someone clicks outside of it.
$("#modal").bind( "clickoutside", function(event){
  $(this).hide();
});

如果您不想使用该插件，可以使用event.stopPropagation() as described here自行完成。

Answer 4

$('#requireddiv').hover(function(){ 
            mouse_is_inside=true; 
        }, function(){ 
            mouse_is_inside=false; 
        });
$("body").mouseup(function(){ 
        if(mouse_is_inside == false) {
            $('#requireddiv').hide();
        } 

    });

我用这个来工作。基本上它一直检查它是否在区域上，当它不在区域和鼠标按钮被点击时，它检查鼠标是否在区域内，如果它不是它将隐藏这个div

点击除了之外的一切

4 个答案: