Dieses Mal zeige ich Ihnen, wie Sie die Ausbreitung von Ereignissen im Front-End verhindern können. Welche Vorsichtsmaßnahmen gibt es, um die Ausbreitung von Ereignissen im Front-End zu verhindern?
Erstellen Sie eine kleine Demo, klicken Sie auf die Schaltfläche, um die schwebende Ebene anzuzeigen, klicken Sie auf eine andere Stelle, um die schwebende Ebene zu schließen, schreiben Sie ein einfaches CSS
<style>
.wrapper{
position:relative;
display:inline-block;
}
.popover{
position:absolute;
border:1px solid red;
left:100%;
top:0;
padding:10px;
margin-left:10px;
background:white;
display: none; /*默认隐藏*/
}
.popover::before{
position:absolute;
content:'';
top:5px;
right:100%;
border:10px solid transparent;
border-right-color:red;
}
.popover::after{
position:absolute;
content:'';
top:5px;
right:100%;
border:10px solid transparent;
border-right-color:white;
margin-right:-1px;
}
</style>
<p id="wrapper" class='wrapper'>
<button id="clickMe">点我</button>
<p id="popover" class="popover">
<input type="checkbox">浮层
</p>
</p>
<script>
clickMe.addEventListener('click',function(){
popover.style.display = 'block';
});
</script>Was passiert, wenn ich auf eine leere Stelle klicke? Seite, um sie jetzt zu schließen? Welche Methode sollte verwendet werden? Es ist leicht, sich Überwachungsdokumente wie den folgenden Code vorzustellen
document.addEventListener('click',function(){
popover.stely.display = 'none';
}); Aber tatsächlich sind die Schaltflächen nach dem Schreiben ungültig und es erfolgt keine Reaktion, egal wie Sie darauf klicken . Warum ist das so?
Nachdem Sie die im vorherigen Artikel erwähnten Einfang- und Blasenereignisse verstanden haben, können Sie dies leicht verstehen, Sie können []().
Wir haben nicht angegeben, ob sich die Überwachung in der Erfassungs- oder Bubbling-Phase befindet. Wenn wir auf die Schaltfläche klicken, findet die Bubbling-Phase nicht statt Zuerst wird die Funktion ausgelöst, dann wird auch die Funktion auf button ausgelöst, wodurch die schwebende Ebene, die gerade angezeigt wird, wieder ausgeblendet wird. documentDann möchten Sie vielleicht fragen: Wurde das Ereignis am
ausgeführt? Tatsächlich werden beide Ereignisse ausgeführt, aber die Zeit ist zu kurz. Der Browser führt sie standardmäßig zusammen aus. Sie können ein button hinzufügen und es sehen. debugger
clickMe.addEventListener('click',function(){
popover.style.display = 'block';
}); auch die Ausbreitung des Ereignisses zu verhindern. popover.style.display = 'block'
clickMe.addEventlistener('click',function(){
popover.style.display = 'block';
});
popover.addEventListener('click',function(e){
e.stopPropagation();
});$(clickMe).on('click',function(){
$(popover).show();
$(document).one('click',function(){
$(popover).hide();
});
});
$(wrapper).on('click',function(e){
e.stopPropagation();
})Zeigen Sie „Monitor“ einmal und schalten Sie ihn sofort aus. Das nennt man „Aufräumen des Schlachtfelds“. popover
entspricht vollständig dem folgenden Code $(wrapper).on('click',false)
$(wrapper).on('click',function(e){
e.preventDefault(); //阻止默认事件
e.stopPropagation(); //阻止传播
}) enthält, fügen Sie das Standardereignis der Organisation auf jeder Ebene des übergeordneten Elements hinzu, einschließlich checkbox selbst. Dann kann dieses checkbox nicht checkbox sein. check
$(clickMe).on('click',function(){
$(popover).show();
$(document).one('click',funtion(){
$(popover).hide();
});
});Wenn ich auf die Schaltfläche klicke, werden zwei Dinge ausgeführt: Zuerst
Dokument anzeigenpopoverDokument ausblenden出来，然后把Dokument ausblenden und dann wieder ausblenden. 函数添加到上面，当事件传播到Sie können eine
$(clickMe).on('click',function(){
$(popover).show();
setTimeout(function(){
$(document).one('click',function(){
$(popover).hide();
})
},0)
});setTimeout()Diese wird nicht sofort ausgeführt, sondern so schnell wie möglich, insbesondere nach dem Sprudeln Die Funktion hier bedeutet, dass nach dem Ende des Sprudelns das Abhörereignis zu setTimeout(fn,0) hinzugefügt und auf die Ausführung des nächsten Klicks des Benutzers gewartet wird. 0document Zusammenfassung:
gleichzeitig, beim Anklicken passiert nichts, da beide Funktionen ausgeführt werden indem Sie die Ausbreitung von Ereignissen verhindern. buttondocument
buttondocumentsetTimeout()Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwendung der leichten Diagrammbibliothek von Chart.j Fallanalyse
Chart.js Detaillierte Erläuterung der Schritte zur Verwendung der leichten HTML5-Diagrammzeichnungstool-Bibliothek
Das obige ist der detaillierte Inhalt vonSo verhindern Sie die Ausbreitung von Ereignissen im Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
