单击函数排除子级。

试着理解 jQuery”。“ not ()”函数，并遇到问题。我希望父 div 是“可单击的”，但是如果用户单击子元素，则不会调用该脚本。

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

Html:

<div class="example">
<div>
<p>This content is not affected by clicks.</p>
</div>
</div>
128423 次浏览
小开
最佳答案

要做到这一点，停止点击子 使用。停止传播:

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

这将阻止子点击冒泡过去他们的水平，所以父不会收到点击。

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

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


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

对于单击，您的问题是 点击一个孩子的气泡到父母，而不是您无意中将单击处理程序附加到子级。

小开

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

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

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

$(".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");
});

就确切的问题而言，我可以看到如下工作:

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

或者反过来:

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

希望能帮上忙。

小开

或者你也可以这样做:

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


// ... //
});
小开

我的解决办法是:

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

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

希望这能有所帮助。

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>

小开

我个人会向子元素添加一个 click 处理程序，该处理程序只是停止单击的传播。所以它看起来像这样:

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

提交答案