Untergeordnetes Element-Klickereignis löst das übergeordnete Klickereignis aus

71

Angenommen, Sie haben einen Code wie diesen:

<html>
<head>
</head>
<body>
   <div id="parentDiv" onclick="alert('parentDiv');">
       <div id="childDiv" onclick="alert('childDiv');">
       </div>   
    </div>
</body>
</html>​

Ich möchte das parentDivKlickereignis nicht auslösen , wenn ich auf " childDivWie kann ich das tun?" Klicke.

Aktualisiert

Wie ist auch die Ausführungsreihenfolge dieser beiden Ereignisse?

javascript jquery dhtml Joe.wang
quelle
3
Dies wird als Ereignisblasen bezeichnet. Ein guter Ausgangspunkt: - stackoverflow.com/questions/4616694/…
Pranav
2
Der Titel dieser Frage sollte "Untergeordnetes Ereignisklick vom übergeordneten übergeordneten Klickereignis stoppen" lauten. Es lautet wie das Gegenteil.
Iwnnay

Antworten:

92

Sie müssen event.stopPropagation () verwenden

Live-Demo

$('#childDiv').click(function(event){
    event.stopPropagation();
    alert(event.target.id);
});​

event.stopPropagation ()

Beschreibung: Verhindert, dass das Ereignis in den DOM-Baum sprudelt, und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.

Adil
quelle
6
Wenn Sie zwei separate Handler für das übergeordnete und das untergeordnete Klickereignis haben und nur den untergeordneten Handler durch Klickereignis für das untergeordnete Ereignis auslösen möchten, müssen Sie event.stopPropagation () für childDiv und nicht für parentDiv
tsveti_iko aufrufen
20

Ohne jQuery: DEMO

 <div id="parentDiv" onclick="alert('parentDiv');">
   <div id="childDiv" onclick="alert('childDiv');event.cancelBubble=true;">
     AAA
   </div>   
</div>
Akhil Sekharan
quelle
Danke @Akhil Es funktioniert für mich.
Amol Rajput
8

Ich stand vor dem gleichen Problem und löste es mit dieser Methode. html:

<div id="parentDiv">
   <div id="childDiv">
     AAA
   </div>
    BBBB
</div>

JS:

$(document).ready(function(){
 $("#parentDiv").click(function(e){
   if(e.target.id=="childDiv"){
     childEvent();
   } else {
     parentEvent();
   }
 });
});

function childEvent(){
    alert("child event");
}

function parentEvent(){
    alert("paren event");
}
Kamuran Sönecek
quelle
6

Die stopPropagation()Methode stoppt das Sprudeln eines Ereignisses zu übergeordneten Elementen und verhindert, dass übergeordnete Handler über das Ereignis benachrichtigt werden.

Mit der Methode können Sie feststellen event.isPropagationStopped(), ob diese Methode jemals aufgerufen wurde (für dieses Ereignisobjekt).

Syntax:

Hier ist die einfache Syntax zur Verwendung dieser Methode:

event.stopPropagation()

Beispiel:

$("div").click(function(event) {
    alert("This is : " + $(this).prop('id'));

    // Comment the following to see the difference
    event.stopPropagation();
});​
palaSн
quelle
5

Klickereignis Blasen , was nun mit Sprudeln gemeint ist, ist hier ein guter Ausgangspunkt . Sie können verwenden event.stopPropagation(), wenn Sie nicht möchten, dass sich dieses Ereignis weiter ausbreitet.

Auch ein guter Link, um auf MDN zu verweisen

Pranav
quelle