search

Home  >  Article  >  Web Front-end  >  How to implement Html event bubbling

How to implement Html event bubbling

一个新手
一个新手Original
2017-10-12 10:33:171728browse

I originally thought that span was different from input, and event bubbling would be swallowed up by the parent tag. I wrote a demo to test event bubbling, but found that it was not what I thought. In addition: event.stopPropagation() and event.stopImmediatePropagation() cannot prevent span from bubbling into the a tag, but the simple and crude return false can. 


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

The above is the detailed content of How to implement Html event bubbling. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Regarding the problem of JQuery full selection/inverse selection failing for the second timeNext article：Regarding the problem of JQuery full selection/inverse selection failing for the second time

Related articles

See more