Ereignis sprudelt zum Elternteil sogar mit stopPropagation?

Ist Stop-Propagation nicht dazu gedacht, das Blasen zu einem Elternelement zu stoppen?Ereignis sprudelt zum Elternteil sogar mit stopPropagation?

Ich weiß, für das Ereignis Ziel in diesem Fall zu überprüfen, ich frage mich nur, warum StopPropagation, die das Wort allein schmatzt nur dieses Problem zu verhindern, führt nicht so.

https://jsfiddle.net/hzo9eq9m/

var child = document.querySelector('.parent') 
 
    .addEventListener('click',function(e){ 
 
     e.stopPropagation(); 
 
     $(this.querySelector('.child')).toggleClass('selected'); 
 
     console.log(e); 
 
    }, 
 
false);

.society { 
 
    padding:10px; 
 
    background-color:green; 
 
    position:relative; 
 
} 
 

 
.parent { 
 
    background-color:red; 
 
    width:60%; 
 
    margin-left:30%; 
 
} 
 

 
.child { 
 
    width: 100%; 
 
    background-color:pink; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:0; 
 
    max-width:0px; 
 
    max-height:0px; 
 
    transition: max-width 1s, max-height 1s; 
 
    overflow:hidden; 
 
} 
 

 
.child.selected { 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    max-width:1000px; 
 
    max-height:1000px; 
 
}

<div class="society"> 
 
    <div class="parent"> 
 
    parent 
 
    <div class="child"> 
 
     child 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-03-27 Magic Lasso

Was Ihr Problem ist? Sie haben nur einen Ereignis-Listener hier, also bin ich mir nicht sicher, welches Verhalten Sie von ['Event.stopPropagation' erwarten] (https://developer.mozilla.org/en-US/docs/Web/API/Event/ stopPropagation) ... –

Ich erwarte, dass das Klickereignis, das dem Elternelement zugeordnet ist, nicht ausgelöst wird, wenn auf das Kind geklickt wird. Klicken Sie auf Eltern, und wenn Kind geöffnet wird, wird das Ereignis auf Eltern ausgelöst, wenn Kind angeklickt wird. StopPropagation behauptet, es zu verhindern. –

Nein, wenn Sie 'stop propagation' auf' child' verwenden, dann würde es nicht bis zum 'parent'-Wert springen. –

Wenn Sie auf Klicks verhindern .child Ausbreitung wollte, dann würden Sie haben einen click Handler auf binden .child:

document.getElementById('parent').addEventListener('click', function(e) { 
 
    alert('parent'); 
 
}, false); 
 

 
document.getElementById('child').addEventListener('click', function(e) { 
 
    alert('child'); 
 
    e.stopPropagation(); // if this isn't called, you'll get 2 alerts when clicking on #child 
 
}, false);

#parent { background-color: yellow; } 
 

 
#child { background-color: red; }

<div id="parent"> 
 
    Parent 
 
    <div id="child"> 
 
    Child 
 
    </div> 
 
</div>

Quelle

2016-03-28 00:07:03

Cool, das war die Antwort, die ich suchte. Ich kenne alle Möglichkeiten, um zu verhindern, dass das Ereignis vom Kind ausgelöst wird, aber die Beschreibung von stopPropagation liest sich so, als würde es automatisch Blasenbildung verhindern. –

@MagicLasso, wenn Sie sich etwas Code sparen möchten, sollten Sie sich [Event Delegation] (http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) ansehen. –

Ich sah Ereignisdelegation mehr als ein Objekt für sich selbst, wo die stopPropagation zum Beispiel eher zum Ereignis gehörte als zum dom-Element, so dass stopPropagation prüfen würde, ob das Ereignis durchgebrannt war (e.target === 'eltern') und Stoppen Sie die Aktivierung des Ereignisses, falls dies der Fall war. In diesem Fall gehört es jedoch tatsächlich zu den Elementen, so dass das Ereignis platzt und dann ausgelöst wird, sobald es benötigt wird, und dann das Ereignis stoppt. Der arme arme arme Teil davon ist, dass das Ereignisobjekt keine Spur davon hat, welches Element das Ereignis tatsächlich verwendet hat. Ich sehe mir diesen Link an. Vielen Dank –

Ja, das ist genau das, was sie tut!

Ihr Code wartet auf einen Klick auf Elemente mit der Elternklasse und schaltet die ausgewählte Klasse auf alle Elemente mit der Kindklasse um. War das nicht die Absicht?

Wenn Sie ein Ereignis für das Kind mit stopPropagation, die Mutter Klick würde nicht Feuer hinzufügen:

var parent = document.querySelector('.parent').addEventListener('click',function(e){ 
    e.stopPropagation(); 
    $(this.querySelector('.child')).toggleClass('selected'); 
    console.log(e); 
},false); 
var child = document.querySelector('.child').addEventListener('click',function(e){ 
    e.stopPropagation(); 
    $(this).toggleClass('selected'); 
    console.log(e); 
},false);

Quelle

2016-03-28 00:01:40

Ereignis sprudelt zum Elternteil sogar mit stopPropagation?

Antwort

Verwandte Themen