jQuery: Klickfunktion Kinder ausschließen.

Ich habe versucht, meinen Kopf um die jQuery-Funktion ".not ()" zu wickeln, und bin auf ein Problem gestoßen. Ich möchte, dass das übergeordnete div "anklickbar" ist, aber wenn ein Benutzer auf ein untergeordnetes Element klickt, wird das Skript nicht aufgerufen.

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

das HTML:

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

Stoppen Sie dazu den Klick auf das Kind mit .stopPropagation :

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

Dadurch wird verhindert, dass die Klicks des Kindes über sein Niveau hinaus sprudeln, sodass das Elternteil den Klick nicht erhält.

.not() wird etwas anders verwendet, filtert es Elemente aus Ihrem Selektor heraus, zum Beispiel:

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

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

Beim Klicken besteht Ihr Problem darin, dass der Klick auf ein Kind zum übergeordneten Element sprudelt und nicht, dass Sie dem Kind versehentlich einen Klick-Handler zugeordnet haben.

Ich verwende folgendes Markup und habe das gleiche Problem festgestellt:

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

Hier habe ich folgende Logik verwendet:

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

In Bezug auf die genaue Frage kann ich sehen, dass dies wie folgt funktioniert:

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

oder natürlich umgekehrt:

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

Hoffentlich hilft das.

Oder Sie können auch:

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

   // ... //
});

Meine Lösung:

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

Ich persönlich würde dem untergeordneten Element einen Klick-Handler hinzufügen, der nichts anderes tut, als die Weitergabe des Klicks zu stoppen. Es würde also ungefähr so ​​aussehen:

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

Hier ist ein Beispiel. Grünes Quadrat ist übergeordnetes Element und gelbes Quadrat ist untergeordnetes Element.

Hoffe das hilft.

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>