jQuery：单击功能排除子项。

jQuery: click function exclude children.

提问by superUntitled

Trying to wrap my head around the jQuery ".not()" function, and running into a problem. I would like to have the parent div to be "clickable" but if a user clicks on a child element, the script is not called.

试图围绕 jQuery “.not()” 函数进行思考，但遇到了问题。我希望父 div 是“可点击的”，但如果用户点击子元素，则不会调用脚本。

$(this).not(children()).click(function(){
   $(".example").fadeOut("fast");
});

the html:

html：

<div class="example">
   <div>
      <p>This content is not affected by clicks.</p>
   </div>
</div>

回答by Nick Craver

To do this, stop the click on the child using .stopPropagation:

为此，请使用 .stopPropagation停止点击孩子：

$(".example").click(function(){
  $(this).fadeOut("fast");
}).children().click(function(e) {
  return false;
});

This will stop the child clicks from bubbling up past their level so the parent won't receive the click.

这将阻止子点击超过他们的级别，因此父母不会收到点击。

.not()is used a bit differently, it filters elements out of your selector, for example:

.not()用法有点不同，它从选择器中过滤元素，例如：

<div class="bob" id="myID"></div>
<div class="bob"></div>

$(".bob").not("#myID"); //removes the element with myID

For clicking, your problem is that the click on a child bubbles up to the parent, not that you've inadvertently attached a click handler to the child.

对于单击，您的问题是对子级的单击会冒泡到父级，而不是您无意中将单击处理程序附加到子级。

回答by MatCarey

I'm using following markup and had encoutered the same problem:

我正在使用以下标记并遇到了同样的问题：

<ul class="nav">
    <li><a href="abc.html">abc</a></li>
    <li><a href="def.html">def</a></li>
</ul>

Here I have used the following logic:

在这里，我使用了以下逻辑：

$(".nav > li").click(function(e){
    if(e.target != this) return; // only continue if the target itself has been clicked
    // this section only processes if the .nav > li itself is clicked.
    alert("you clicked .nav > li, but not it's children");
});

In terms of the exact question, I can see that working as follows:

就确切的问题而言，我可以看到其工作方式如下：

$(".example").click(function(e){
   if(e.target != this) return; // only continue if the target itself has been clicked
   $(".example").fadeOut("fast");
});

or of course the other way around:

或者当然反过来：

$(".example").click(function(e){
   if(e.target == this){ // only if the target itself has been clicked
       $(".example").fadeOut("fast");
   }
});

Hope that helps.

希望有帮助。

回答by dani24

Or you can do also:

或者你也可以这样做：

$('.example').on('click', function(e) { 
   if( e.target != this ) 
       return false;

   // ... //
});

回答by npl len

My solution:

我的解决方案：

jQuery('.foo').on('click',function(event){
    if ( !jQuery(event.target).is('.foo *') ) {
        // code goes here
    } 
});

回答by Noahone

I personally would add a click handler to the child element that did nothing but stop the propagation of the click. So it would look something like:

我个人会向子元素添加一个点击处理程序，它只会停止点击的传播。所以它看起来像：

$('.example > div').click(function (e) {
    e.stopPropagation();
});

回答by Nole

Here is an example. Green square is parent and yellow square is child element.

这是一个例子。绿色方块是父元素，黄色方块是子元素。

Hope that this helps.

希望这会有所帮助。

var childElementClicked;

$("#parentElement").click(function(){

  $("#childElement").click(function(){
     childElementClicked = true;
  });

  if( childElementClicked != true ) {

   // It is clicked on parent but not on child.
      // Now do some action that you want.
      alert('Clicked on parent');
   
  }else{
      alert('Clicked on child');
    }
    
    childElementClicked = false;
 
});

#parentElement{
width:200px;
height:200px;
background-color:green;
position:relative;
}

#childElement{
margin-top:50px;
margin-left:50px;
width:100px;
height:100px;
background-color:yellow;
position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentElement">
  <div id="childElement">
  </div>
</div>