Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie Javascript verhindert, dass Ereignisse sprudeln und das Ereignis selbst eintritt

autoload
Freigeben: 2021-04-15 13:55:16
Original
2026 Leute haben es durchsucht

In Javascript wird die Ereignisblase vom Knoten erzeugt und wirkt sich dann schrittweise auf den übergeordneten Knoten aus, bis sie sich schließlich langsam auf die gesamte Seite auswirkt. Manchmal möchten wir jedoch das Auftreten von Ereignisblasen oder sogar das Auftreten des Ereignisses verhindern selbst? Dieser Artikel führt Sie dazu, es gemeinsam herauszufinden.

1. Verhindern Sie, dass Ereignisse sprudeln.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .boxA {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: blue;
            text-align: center;
        }       
        .boxB {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: green;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="boxA">
        <div class="boxB">boxB</div>
    </div>
    <script>
        var boxA = document.querySelector(&#39;.boxA&#39;);
        var boxB = document.querySelector(&#39;.boxB&#39;);
        boxA.onclick = function (e) {
        console.log(&#39;我被点击了boxA&#39;);
    };
    boxB.onclick = function (e) {
        e.cancelBubble=true; //不冒泡
        console.log(&#39;我被点击了boxB&#39;);
    };
    </script>
</body>
</html>
Nach dem Login kopieren

2. Verhindern Sie, dass Ereignisse passieren

Das obige ist der detaillierte Inhalt vonWie Javascript verhindert, dass Ereignisse sprudeln und das Ereignis selbst eintritt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage