suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie das Bubbling von HTML-Ereignissen

So implementieren Sie das Bubbling von HTML-Ereignissen

一个新手
一个新手Original
2017-10-12 10:33:171769Durchsuche

Ich dachte ursprünglich, dass die Spanne sich von der Eingabe unterscheidet und das Event-Bubbling vom übergeordneten Tag verschluckt wird. Ich habe eine Demo geschrieben, um das Event-Bubbling zu testen, aber festgestellt, dass es nicht das war, was ich dachte. Darüber hinaus: event.stopPropagation() und event.stopImmediatePropagation() können nicht verhindern, dass span in das a-Tag sprudelt, aber das einfache und grobe return false schon. 


<!DOCTYPE html>
<html>
<head>
    <title>Bubbling</title>
    <style type="text/css">
        * {
            font-size:30px;
        }
        div {
            border: 1px blue solid;
        }
        span {
            border: 1px blue solid;
        }
    </style>
    <script type="text/javascript">
        function setforeColor(sender) {
            sender.style.color = "red";
        }

        function setbgColor(sender) {
            sender.style.background = "green";
            return false;
        }
    </script>
</head>
<body>
    <div>
        <span onclick="setforeColor(this)">span tag</span> in div
    </div>
    <br>
    <div>
        <input type="button" value="Button" onclick="setforeColor(this)"/> in div
    </div>
    <br>
    <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
        <span onclick="setforeColor(this);return false">span tag</span> in anchor
    </a>
    <br>
    <a href="https://www.baidu.com" style="text-decoration:none;display:block;">
        <span onclick="setbgColor(this)">span tag</span> in anchor
    </a>
</body>
</html>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Bubbling von HTML-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Bezüglich des Problems, dass die vollständige Auswahl/inverse Auswahl von JQuery zum zweiten Mal fehlschlägtNächster Artikel：Bezüglich des Problems, dass die vollständige Auswahl/inverse Auswahl von JQuery zum zweiten Mal fehlschlägt

In Verbindung stehende Artikel

Mehr sehen