单击元素外部时的jQuery触发事件

$(document).click(function(evt) { var target = evt.currentTarget; var inside = $(".menuWraper"); if (target != inside) { alert("bleep"); } }); 

我试图找出如何制作它，以便如果用户点击某个div（menuWraper）之外，它会触发一个事件..我意识到我可以让每次点击触发一个事件，然后检查点击的currentTarget是否是与从$（“。menuWraper”）中选择的对象相同。 但是，这不起作用，currentTarget是HTML对象（？）而$（“。menuWraper”）是Object对象？ 我很迷茫。

Answer 1

只需让您的menuWraper元素调用event.stopPropagation()以便其click事件不会冒泡到document 。

试一试： http ： //jsfiddle.net/Py7Mu/

 $(document).click(function() { alert('clicked outside'); }); $(".menuWraper").click(function(event) { alert('clicked inside'); event.stopPropagation(); }); 

• http://api.jquery.com/event.stopPropagation/

或者，你可以return false; 而不是使用event.stopPropagation();

Answer 2

如果您有下拉菜单等子元素

 $('html').click(function(e) { //if clicked element is not your element and parents aren't your div if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { //do stuff } }); 

Answer 3

这里最常见的应用是关闭单击文档，但不是当它来自该元素时，为此你要停止冒泡，如下所示：

 $(".menuWrapper").click(function(e) { e.stopPropagation(); //stops click event from reaching document }); $(document).click(function() { $(".menuWrapper").hide(); //click came from somewhere else }); 

所有人都在这里做的是阻止点击从.menuWrapper元素中冒出来（通过event.stopPrpagation() ）。 如果没有发生这种情况，那么点击来自其他地方，并且默认情况下会让它成为document ，如果它到达那里，我们会隐藏那些.menuWrapper元素。

Answer 4

试试这些……

 $(document).click(function(evt) { var target = evt.target.className; var inside = $(".menuWraper"); //alert($(target).html()); if ($.trim(target) != '') { if ($("." + target) != inside) { alert("bleep"); } } }); 

Answer 5

我知道问题已得到解答，但我希望我的解决方案可以帮助其他人。

stopPropagation在我的情况下引起了问题，因为我需要click事件来获取其他内容。 此外，并非每个元素都应该在单击时关闭div。

我的解决方案

 $(document).click(function(e) { if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && $(e.target).closest("#div-exception").attr("id") != "div-exception") { alert("Clicked outside!"); } }); 

http://jsfiddle.net/NLDu3/

Answer 6

此代码将打开相关菜单，并将设置单击侦听器事件。 触发后，它将遍历目标id的父项，直到找到菜单ID。 如果没有，它将隐藏菜单，因为用户已在菜单外单击。 我测试了它，它的工作原理。

 function tog_alerts(){ if($('#Element').css('display') == 'none'){ $('#Element').show(); setTimeout(function () { document.body.addEventListener('click', Close_Alerts, false); }, 500); } } function Close_Alerts(e){ var current = e.target; var check = 0; while (current.parentNode){ current = current.parentNode if(current.id == 'Element'){ check = 1; } } if(check == 0){ document.body.removeEventListener('click', Close_Alerts, false); $('#Element').hide(); } } 

Answer 7

我不认为文件会触发click事件。 尝试使用body元素捕获click事件。 可能需要检查一下……

Answer 8

试试这个

  $(document).click(function(event) { if(event.target.id === 'xxx' ) return false; else { // do some this here } }); 

Answer 9

 $(document).click((e) => { if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { } else { this.onClose(); } }); 

Answer 10

 function handler(event) { var target = $(event.target); if (!target.is("div.menuWraper")) { alert("outside"); } } $("#myPage").click(handler);