如何使用 Jquery 编写“如果未单击”或“如果单击外部元素”？

Question

我有点纠结于如何阻止我的菜单执行fadeOut() 函数。当我单击菜单上的主链接以打开子菜单时，它就会淡出。以下是代码目前的样子：

    $('a.main-menu-item').click(function(){

    if($('.rtmenu:visible')){

        $('.rtmenu').click(function(e) { e.stopPropagation(); });

        $(document).click(function() {
            $('.rtmenu').fadeOut(200);
        });
    }
})

谁能告诉我如何在写有“文档”的地方写下“如果未点击 a.main-menu-item”？

非常感谢

---

找到解决方案！

$('.rtmenu').click(function(e) { e.stopPropagation(); });
$('.rtmenu').mouseout(function(){ 
     $(document).one('click',function() { $('.rtmenu').fadeOut(200); }); 
 })

Answer 1

使用blur 事件来处理失去焦点。 This 也可能有帮助。

Answer 2

看看 Ben Alman 的 "outside events" plugin。它允许您定义一系列事件，而不仅仅是单击事件。有了它，您的代码将如下所示：

$('.rtmenu').bind('clickoutside', function() {
    $(this).fadeOut(200);
});

顺便说一句，您不应该在菜单的单击事件中设置绑定，这将在每次单击菜单选项时附加另一个处理程序。您的代码应替换为：

$('a.main-menu-item').click(function(){
    // Show menu item
});
$('.rtmenu').bind('clickoutside', function() {
    $(this).fadeOut(200);
});