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 test 内部也不会触发任何事件，即当我点击复选框时，不会触发任何事件。

任何帮助都将非常感激。

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

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

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

Answer 4

$(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 5

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

});

JSFIDDLE DEMO

Answer 6

HTML：

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

JavaScript的：

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

Answer 7

只需使用：(Demo)

<强>的JavaScript

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

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

e.stopPropagation()阻止了bubbling the event to the next element

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 function

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

9 个答案: