jQuery: çocukları hariç tutma işlevini tıklatın.

Başımı jQuery ".not ()" fonksiyonunun etrafına sarmaya çalışıyorum ve bir sorunla karşılaşıyorum. Ben üst div "tıklanabilir" olmasını istiyorum ama bir kullanıcı bir alt öğe tıklarsa, komut dosyası çağrılmaz.

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

html:

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

Bunu yapmak için, .stopPropagation kullanarak alt tıklamayı durdurun :

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

Bu, üst tıklama tıklamaması için alt tıklamaların düzeylerini aşmasını engelleyecektir.

.not() biraz farklı bir şekilde kullanılırsa, öğeleri seçicinizden filtreler, örneğin:

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

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

Tıklamak için sorununuz, bir çocuğa yapılan tıklamanın yanlışlıkla çocuğa bir tıklama işleyicisi iliştirmediğinizden değil üst öğeye doğru kabarmasıdır .

Aşağıdaki biçimlendirme kullanıyorum ve aynı sorunu kodlanmış:

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

Burada aşağıdaki mantığı kullandım:

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

Tam soru açısından, bunun çalıştığını aşağıdaki gibi görebiliyorum:

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

veya tabii ki tam tersi:

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

Umarım yardımcı olur.

Veya şunları da yapabilirsiniz:

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

   // ... //
});

Çözümüm:

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

Şahsen ben tıklamanın yayılmasını durdurmak hiçbir şey yapmadı alt öğeye bir tıklama işleyicisi eklemek istiyorum. Yani şöyle bir şey olurdu:

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

İşte bir örnek. Yeşil kare üst öğedir ve sarı kare alt öğedir.

Umarım bu yardımcı olur.

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>