$('html').click()... 除了一个元素之外的任何地方答案

【问题标题】：$('html').click()... anywhere except one element$('html').click()... 除了一个元素之外的任何地方
【发布时间】：2021-11-07 22:04:31
【问题描述】：

如果您单击页面上的任何位置（包括菜单链接本身），我将删除一个动态附加的菜单。我想要实现的是在您单击特定链接时防止删除，而这对我来说根本不起作用。不幸的是，我不能使用委托方法，如果这有帮助的话，由于客户端使用的 jquery 的旧版本，没有更新它的选项。

所以也许你可以建议是否有任何方法可以这样做。这是我的一个简单示例。

<script>
    $(function() {
        $('.menu').append('<a href="" class="solid">Option</a> <a href="">Option</a> <a href="">Option</a>');           
                
        $('.menu a').live('click',function(){
            return false;
        });         

        $('a.solid').live('click',function(){
            return false;
        });

        $('html').click(function() {                    
            $('.menu').remove();                
        });             
                            
        });
</script>

和容器

<div class="menu"></div>

【问题讨论】：

标签： javascript jquery html click

【解决方案1】：

也许它会像这样工作

$('html').click(function(e) {                    
   if(!$(e.target).hasClass('solid') )
   {
       $('.menu').remove();                
   }
});

见：http://jsfiddle.net/fq86U/2/

【讨论】：

嘿嘿，这太完美了！！！！像魅力一样工作，直截了当，包括 .live('click',function...
stoppropagation 是一种更好的方法，但如果这在某些方面不可行，那么此方法将起作用。
我可以问一个问题：如果我的容器中有孩子，我想如何做同样的行为？我不想为容器中的所有孩子添加一个类。有人知道解决方案吗？ Example

【解决方案2】：

你试过这个吗：

$('.menu a').click(function(event){
   event.stopPropagation();
});

【讨论】：

还添加 event.preventDefault() 以完全停止操作。
我在这里测试过，它可以工作，你可能使用的是奇怪的 jQuery 版本。如果你在“.menu a”的点击处理程序中执行alert(event)，它会告诉你什么？
@wouterh 好的，但没有 LIVE 方法。在我的情况下，它必须是 ...live('click',function(event){..... 因为我稍后会用 ajax 调用菜单。并且使用 LIVE 方法不起作用。
“稍后使用 ajax 调用菜单”是什么意思？
当新的菜单数据进来时，你可以重新应用事件处理程序

【解决方案3】：

您还可以检测对整个文档的点击并检查当前点击的元素是否是您的菜单元素

$(document).click(function(event){
    if(event.target !== $('.menu')[0]) {
        // hide the menu...
    }
});

【讨论】：

【解决方案4】：

$('html').click(function(e) {

        /* exept elements with class someClass */ 
        if($(e.target).hasClass('someClass')){
            e.preventDefault();
            return;
        }

        /* but be carefull the contained links! to be clickable */
        if($(e.target).is('a')){
            return;
        }

        /* here you can code what to do when click on html */

    });

【讨论】：