jQuery: ฟังก์ชั่นคลิกไม่รวมลูก

พยายามปิดหัวของฉันรอบฟังก์ชั่น ".not ()" jQuery และพบปัญหา ฉันต้องการให้ div parent เป็น "clickable" แต่หากผู้ใช้คลิกที่องค์ประกอบย่อยสคริปต์จะไม่ถูกเรียก

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

html ที่:

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

หากต้องการทำสิ่งนี้ให้หยุดการคลิกที่ลูกโดยใช้. 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

สำหรับการคลิกปัญหาของคุณคือการคลิกที่ลูก ๆ ลอยอยู่กับผู้ปกครองไม่ใช่ว่าคุณได้แนบตัวจัดการการคลิกกับเด็กโดยไม่ได้ตั้งใจ

ฉันใช้มาร์กอัปต่อไปนี้และได้เข้ารหัสปัญหาเดียวกัน:

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

โดยส่วนตัวฉันจะเพิ่มตัวจัดการการคลิกให้กับองค์ประกอบย่อยที่ไม่ได้ทำอะไรเลยยกเว้นหยุดการเผยแพร่คลิก ดังนั้นมันจะมีลักษณะดังนี้:

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

นี่คือตัวอย่าง สี่เหลี่ยมสีเขียวเป็นพาเรนต์และสี่เหลี่ยมสีเหลืองเป็นองค์ประกอบย่อย

หวังว่าสิ่งนี้จะช่วย

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>