Javascript中的事件冒泡

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript中的事件冒泡相关的知识,希望对你有一定的参考价值。


1、概念

事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发。触发的顺序是“由内而外”。


2、取消事件冒泡

谷歌、IE

window.event.cancelBubble = true;

火狐

e.stopPropagation();


示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>javascript测试</title>
    <script type="text/javascript">
        onload = function(){
            document.getElementById(‘dv‘).onclick=function(){
                alert(this.id);
            };
            document.getElementById(‘p1‘).onclick=function(){
                alert(this.id);
                window.event.cancelBubble = true;//取消事件冒泡
            };
        };
    </script>
</head>
<body>
    <div id="dv" style="width:300px;height:180px;border:solid 1px red;">
        <p id="p1" style="width:200px;height:50px;background-color: aquamarine;">这里是P标签</p>
    </div>
</body>
</html>

效果图一(firefox不支持window.event.cancelBubble)

技术分享

效果图二(IE)

技术分享




示例代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Javascript测试</title>
    <script type="text/javascript">
        onload = function(){
            document.getElementById(‘dv‘).onclick=function(){
                //alert(this.id);
                alert(window.event.srcElement.id);//通过srcElement获取到最原始的element的id
            };
            document.getElementById(‘p1‘).onclick=function(){
                alert(this.id);
                //window.event.cancelBubble = true;//取消事件冒泡
            };
        };
    </script>
</head>
<body>
    <div id="dv" style="width:300px;height:180px;border:solid 1px red;">
        <p id="p1" style="width:200px;height:50px;background-color: aquamarine;">这里是P标签</p>
    </div>
</body>
</html>

效果图

技术分享


再次强调this表示的是当前监听的事件

event.srcElement是引发事件的对象(冒泡)





以上是关于Javascript中的事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章

javascript中的事件冒泡事件捕获和事件执行顺序

JavaScript中的事件冒泡?事件传播的解释

如何防止javascript中的事件冒泡

JavaScript学习之事件

javascript中的事件类型

JavaScript---事件冒泡事件捕获