jQuery：单击函数排除子项。

试图把我的头围绕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> 

Answer 1

要做到这一点，停止点击使用.stopPagagation的孩子：

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

这将阻止孩子点击从他们的级别冒泡，所以家长不会收到点击。

.not()的用法有点不同，它会过滤掉select器中的元素，例如：

 <div class="bob" id="myID"></div> <div class="bob"></div> $(".bob").not("#myID"); //removes the element with myID 

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

Answer 2

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

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

希望有所帮助。

Answer 3

或者你也可以这样做：

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