检测文档上的点击，但忽略特定元素

问题描述：

我想要点击除链接<a>和按钮<button>以外的任何地方时隐藏此弹出窗口。

我可以添加事件侦听器document并忽略这些2个元素？

我尝试以下，但它不能正常工作：

(function($) { 
 

 
    $(document).on('click', ':not(a, button)', function(event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    console.log(event.target.nodeName); 
 
    }); 
 

 
    /* Other option, also not working properly 
 
    $(document).not('a, button').on('click', function (event) { 
 
    \t event.preventDefault(); 
 
    event.stopPropagation(); 
 
    console.log(event.target.nodeName); 
 
    }); 
 
    */ 
 

 
})(jQuery);

.container { 
 
    padding: 35px; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a href="#" class="link">I'm a link</a> 
 
    <button>I'm a button</button> 
 
</div>

选项我知道约，但仍然觉得不妥：

使用的，如果像这样的语句：

if(event.target.nodeName.toLowerCase() !== 'a' or event.target.nodeName.toLowerCase() !== 'button') { 
     // Do w/e I want to 
}

或停止亲pagation使用：

$('a, button').on('click', function(event) { 
    event.stopPropagation(); 
});

只使用'$（ 'A，按钮'）点击（函数（）{ 返回假。 }）;' –

@HappyCoding使用它将打破所有链接和按钮.. –

答

我想你问，如果event.target是a或button这样的：

if (!$(event.target).closest("a, button").length)

希望这有助于你。

(function($) { 
 

 
    $(document).on('click', function(event) { 
 
    if (!$(event.target).closest("a, button").length) { 
 
     console.log(event.target.nodeName); 
 
    } 
 

 
    }); 
 

 
})(jQuery);

.container { 
 
    padding: 35px; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a href="#" class="link">I'm a link</a> 
 
    <button>I'm a button</button> 
 
</div>

答

你知道你是从event.target.nodeName越来越element，那么就检查它是否是要么A或BUTTON，如果是，就return

(function($) { 
 

 
    $(".container").on('click', function(event) { 
 
    if(event.target.nodeName=='A' || event.target.nodeName=='BUTTON') 
 
     return; 
 
    console.log(event.target.nodeName); 
 
    }); 
 
})(jQuery);

.container { 
 
    padding: 35px; 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a href="#" class="link">I'm a link</a> 
 
    <button>I'm a button</button> 
 
</div>

答

你的问题最简单的办法如下：

$(document).on('click', function(event) { 
    if (!$(event.target).closest("a, button").length) { 
     if(event.target.nodeName=="A"||event.target.nodeName=="BUTTON"){ 
    //DON'T DO ANY THING 
     } 
     else{ 
    //SHOW THE POPUP 
    } 

    } 

    }); 
Hope this helps!!!!!

检测文档上的点击，但忽略特定元素

相关推荐