javascript - 在特定 div 之外单击时调用函数

Question

我有一个html结构

<div class="abc">
  <div id="test">
    <label>Name</label>
    <input type="checkbox">
    <label>Name</label>
    <input type="checkbox">
    <label>Name</label>
    <input type="checkbox">     
  </div>
</div>

我希望当我在div id test之外单击时，可以调用特定的函数。并且在div id 测试中也不会触发任何事件，即当我单击复选框时，不会触发任何事件。

任何帮助将不胜感激。

Answer 1

您可以通过以下代码实现它（演示：http: //jsfiddle.net/CrfCD/）

$(document).ready(function(){
    $(document).click(function(e){
        if ($(e.target).is('#test,#test *')) {
            return;
        }
        else
        {
            alert("Hi");
            //Perform your event operations
        }
    });
});

Answer 2

试试这个，

 $('.abc').click(function(e){
  if(e.target.id == 'test') {
   return false;
  }
 })

Answer 3

只需使用：（演示）

JavaScript

$('.abc').click(function(e){
    alert('Do anything');
});

$('#test').click(function(e){
    e.stopPropagation();
    // Do only if anything in #test was clicked
});

e.stopPropagation()防止将事件冒泡到下一个元素

Answer 4

您可以获取点击的div的ID并检查它是否等于test。

$("body").on("click", function(e) {
    if(e.target.id != "test") {
       // do something
       return false;
    }
    else {
       return false;
    }
});

Answer 5

$(document).click(function(e){
   if(e.target.id == "test"){
     e.preventDefault();      
     e.stopPropagation();   
   }
   else{
      //your function call that you want to invoke on clicking anywhere outside of div _test_
   } 
});

Answer 6

$(document).click(function(e) {
   if(e.target.id == 'test') {
        alert( "Handler for .click() called." );
    }

});

JSFIDDLE 演示

Answer 7

HTML：

<div id="abc" onclick="getId()"> 

JavaScript：

function getId() {
    --Write your function here--
} 

Answer 8

试试这个

$(document).click(function(e) {
   if($(e.target).is("#test")){
     e.preventdefault();
     e.stopPropogation();
   } else{ 
     //call your method
   }
}

Answer 9

使用 div 焦点事件，因为它只会在 div 失去焦点时调用一次。参考帖子Div - onblur 函数