Home > Article > Web Front-end > Usage example of javascript bubbling event (code)

Usage example of javascript bubbling event (code)

不言forward: 2018-10-27 15:20:341465browse

The content of this article is about the usage examples (code) of JavaScript bubbling events. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Note: When the lower element and the upper element support the same event, when the upper event is triggered, the lower event is also triggered. This is called event bubbling.

Cancel event bubbling: ev.cancelBubble = true

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        body{
        background:yellow;}
        div{
        width:300px;
        height:300px;
        background:green;
        }
        </style>
    </head>
    <body  onclick="di()">
        <div onclick="ding()"></div>    
    </body >
    <script>
    function di(){
    alert(&#39;底层&#39;)
    
    }
    function ding(e){
    var ev = e|| event

// 取消事件冒泡，其实是阻止事件向下传递
            ev.cancelBubble = true
    alert(&#39;上层社会&#39;)
    }
    
    </script>

</html>

Clicking the upper div will also trigger the lower event. To cancel bubbling, just: ev.cancelBubble = true

Usage example of javascript bubbling event (code)

The above is the detailed content of Usage example of javascript bubbling event (code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：JavaScript implements automatic left-sliding carousel (code example)Next article：JavaScript implements automatic left-sliding carousel (code example)

See more

Usage example of javascript bubbling event (code)

Related articles