So verhindern Sie die Ausbreitung von Ereignissen im Frontend

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=&#39;wrapper&#39;>
    <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';
});

Wie kann man das Problem lösen? Der einfachste Weg besteht darin, zusätzlich zur Ausführung von

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

Warum wird es dem übergeordneten Element der Schaltfläche hinzugefügt? Wenn es nicht zum übergeordneten Element hinzugefügt wird, wird die schwebende Ebene geschlossen, wenn Sie darauf klicken.

Wenn es viele Zuhörer auf der Seite gibt, ist diese Methode eine Speicherverschwendung. Eine speichersparendere Methode ist die Verwendung von JQuery, um

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',function(){
        $(popover).hide();
    });
});
$(wrapper).on('click',function(e){
    e.stopPropagation();    
})

Nicht am Anfang zuzuhören

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();    //阻止传播
})

, aber wenn die Seite ein

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

Hier stellt sich die Frage, was passieren wird, wenn die Ausbreitung des Ereignisses nicht verhindert wird.

$(clickMe).on('click',function(){
    $(popover).show();
    $(document).one('click',funtion(){
        $(popover).hide();
    });
});

Natürlich wird nach wie vor nichts passieren. Was ist also passiert, als ich auf den Button geklickt habe?

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

-Funktion hinzufügen, um dieses Problem zu lösen

$(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:

überwacht
1. und

   gleichzeitig, beim Anklicken passiert nichts, da beide Funktionen ausgeführt werden indem Sie die Ausbreitung von Ereignissen verhindern. buttondocument

Eine bessere Möglichkeit besteht darin, jQuery zu verwenden. Wenn es geschlossen ist, wird es angezeigt hört nicht mehr zu und verhindert die Ausbreitung des Ereignisses nicht. Es gibt zwei Lösungen: Die eine besteht darin, die Ausbreitung des Ereignisses zu verhindern, und die andere darin, eine
2. -Funktion hinzuzufügen.

   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!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von React-router v4

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!