recherche

Maison >interface Web >js tutoriel >Comment implémenter le bouillonnement d'événements HTML

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

一个新手
一个新手original
2017-10-12 10:33:171770parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Concernant le problème de l'échec de la sélection complète/sélection inverse de JQuery pour la deuxième foisArticle suivant：Concernant le problème de l'échec de la sélection complète/sélection inverse de JQuery pour la deuxième fois

Articles Liés

Voir plus