Finden Sie das nächste Element beim Klicken mit jQuery

Question

Ich triggert eine Funktion durch Klicken auf ein verschachteltes Element. Um Blasenbildung zu vermeiden, könnte ich e.stopPropagation(); verwenden.

Wenn die Propagierung unterbrochen wird, haben andere Skripts Probleme, da sie darauf angewiesen sind, diese Elemente zu sprudeln. Gibt es einen anderen Weg? Eine Art von if-Aussage?

html

<div class="nested-element"> 
    <div class="nested-element"> 
    content 
    </div> 
    content 
</div> 

Die Verschachtelung ist im wirklichen Leben keine Grenzen gesetzt.

jquery

$('.selector').on('click', '.nested-element', function(e) { 
    //e.stopPropagation(); 
    console.log($(this)); 
}); 

Der obige Ausgang die Wurzel Mutter zuerst und dann näher an das nächstgelegenen Element bewegen. Ich möchte nur das nächste Element bekommen.

Answer 1

Sie können die target überprüfen und, wenn das Ziel in einem Nachkommen Instanz der Klasse ist nichts zu tun

$(document).on('click', '.nested-element', function(e) { 
 
    if(!$(e.target).closest('.nested-element').not(this).length){ 
 
    console.log('nested-element clicked =', this.id); 
 
    }else{  
 
    console.log('Ignore parent event') 
 
    }  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent" class="nested-element"> 
 
    <div id="child" class="nested-element"> 
 
    child content 
 
    </div> 
 
    parent content 
 
</div>