suchen

Heim >Web-Frontend >js-Tutorial >Wie Javascript verhindert, dass Ereignisse sprudeln und das Ereignis selbst eintritt

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

autoload
autoloadOriginal
2021-04-09 11:27:182059Durchsuche

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>

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!

JavaScript JS 事件
Stellungnahme：
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
Vorheriger Artikel：So ermitteln Sie, ob ein Zeichen in Javascript leer istNächster Artikel：So ermitteln Sie, ob ein Zeichen in Javascript leer ist

In Verbindung stehende Artikel

Mehr sehen