如何在文档点击时排除元素

Question

jQuery

$(document).click( function () {
    alert("hi");
}

HTML

<div id="wrapper">
  <div id="inner-1">
    <div id="sub-inner1">Sub Inner1 Content</div>
    <div id="sub-inner2">Sub Inner2 Content</div>
    <div id="sub-inner3">Sub Inner3 Content</div>
  </div>

  <div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;"> 
    content inside inner-2 div 
  </div>
</div>

我希望使用Jquery在文档单击时显示Hi警报消息。但是我想排除Inner-1 div及其子元素。我的意思是，只有当我点击除Inner-1和其子元素以外的div时才想要获取警报消息。谢谢。

- Pearl

---

$('#inner-1').on('click', function() { return false; }); 怎么样？ - benastan

Answer 1

尝试

$(document).on('click', function (e) {
    if($(e.target).closest('#inner-1').length == 0){
        console.log("click", e.target);
    }
});

演示: Fiddle

- Arun P Johny

Answer 2

只需像这样将一个新的事件绑定到排除元素：

jQuery(document).on('click', function(e) {
  alert('Document got a click event');
});

// Here bind event on those event on which you want to exclude from
// document click
jQuery(document).on('click', '#inner-1', function(e) {
  e.preventDefault();
  e.stopPropagation();
  return false;
});

- Vin.AI

Answer 3

$(document).not('#inner-1').click(function () {
alert("hi");
});

参考.not()

- Rituraj ratan

Answer 4

试试这个：

$('#wrapper>div').not('#inner-1').click( function () {
    alert("hi");
});

演示 这里

- Sergio

---

它是否也适用于inner1 div的子元素？ - Pearl

谢谢。但是我想使用文档对象代替#wrapper。请帮忙。 - Pearl

Answer 5

请查看这个。

$(document).on("click", "#wrapper > div[id!='inner-1']", function(){
    alert("Hi");
});

希望这能对你有所帮助。

- Shailesh Rathod