Comment implémenter le bouillonnement d'événements HTML-js tutoriel-php.cn

Comment implémenter le bouillonnement d'événements HTML

一个新手

Libérer： 2017-10-12 10:33:17

original

1706 Les gens l'ont consulté

Au départ, je pensais que la durée était différente de l'entrée et que le bouillonnement d'événements serait englouti par la balise parent. J'ai écrit une démo pour tester le bouillonnement d'événements, mais j'ai découvert que ce n'était pas ce que je pensais. De plus : event.stopPropagation() et event.stopImmediatePropagation() ne peuvent pas empêcher le span de bouillonner dans la balise a, mais le simple et grossier return false le peut.

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!