jQuery:点击功能排除孩子。

时间:2010-03-16 18:58:58

标签: 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>

6 个答案:

答案 0 :(得分:188)

要执行此操作,请停止点击孩子using .stopPropagation

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

要点击,您的问题就是click on a child bubbles up to the parent,而不是您无意中将点击处理程序附加到孩子身上。

答案 1 :(得分:168)

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

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

希望有所帮助。

答案 2 :(得分:21)

或者你也可以这样做:

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

   // ... //
});

答案 3 :(得分:3)

我的解决方案:

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

答案 4 :(得分:0)

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

希望这会有所帮助。

  var MongoClient = require('mongodb').MongoClient;
    var url = "mongodb://localhost:27017/test";

    MongoClient.connect(url, function (err, datbase) {
        if (err) throw err;
        var myStudent = { name: "Jai Sharma", address: "E-3, Arera Colony, Bhopal" };

         db.collection("student").insertOne(myStudent, function (err, result) {
            if (err) throw err;
            console.log("1 Recorded Inserted");
            db.close();
        });

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

答案 5 :(得分:0)

我个人会向子元素添加一个点击处理程序,该处理程序除了停止点击的传播外什么也不做。这样看起来像:

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