zoukankan      html  css  js  c++  java
  • javascript里阻止事件冒泡

    如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了。

    IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

    火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

    我们看代码实例:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件对象--阻止事件冒泡</title>
    </head>
    <body>
        <div id="gray" style="background:#ddd;400px;height:400px;">
            <div id="red" style="background:#FF0000;200px;height:200px;"></div>
        </div>
    
        <script>
            var oGray=document.getElementById("gray");
            var oRed=document.getElementById("red");
    
            oGray.onclick=function(){
                alert("点击了灰色块!");
            }
    
            oRed.onclick=function(e){
                alert("点击了红色块!");
    
                var event=e||window.event;
                //阻止冒泡事件,否则会触法oGray.onclick方法
                if(document.all){
                    //IE
                    event.cancelBubble=true;//如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true
                }else{
                    //FF,Chrome
                    event.stopPropagation();//不再派发事件
                }
            }
            
        </script>
    </body>
    </html>
  • 相关阅读:
    《SQL Server 2008从入门到精通》--20180628
    2019国赛
    [蓝桥杯2020] 湖北省省赛
    2019第十届蓝桥杯B组决赛题解第五题
    试题 算法提高 分解质因数
    大数相加减
    试题 算法提高 汉诺塔
    试题 算法提高 欧拉函数
    试题 算法提高 天天向上-dp
    算法训练 猴子吃包子-构造
  • 原文地址:https://www.cnblogs.com/52fhy/p/3969814.html
Copyright © 2011-2022 走看看