zoukankan html css js c++ java

Preventing and Event from Propagation Through a set of Nested Elements

<!DOCTYPE HTML>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>Prevent Propagation</title>
        <style type="text/css">
        #one{width: 100px;height: 100px;background-color: #0f0;}
        #two{width: 50px;height: 50px;background-color: #f00;}
        #stop{display: block;}
        </style>
        <script type="text/javascript">
            var stopPrpagation=false;
            function listenEvent(eventTarget,eventType,eventHandler){
                if(eventTarget.addEventListener){
                    eventTarget.addEventListener(eventType,eventHandler,false);
                }else if(eventType.attachEvent){
                    eventType="on"+eventType;
                    eventTarget.attachEvent(eventType,eventHandler);
                }else{
                    eventTarget["on"+eventType]=eventHandler;
                }
            }
            function cancelPropagation(event){
                if(event.stopPrpagation){
                    event.stopPrpagation();
                }else{
                    event.cancelBubble=true;
                }
            }
            listenEvent(window,"load",function(){
                listenEvent(document.getElementById("one"),"click", clickBoxOne);
                listenEvent(document.getElementById("two"),"click",clickBoxTwo);
                listenEvent(document.getElementById("stop"),"click",stopProp);
            })
            function stopProp(){
                stopPrpagation=true;
            }
            function clickBoxOne(evt){
                alert("Hello from one!");
            }
            function clickBoxTwo(evt){
                alert("Hi from Two!");
                if(stopPrpagation){
                    cancelPropagation(evt);
                }
            }
        </script>
    </head>
    <body>
        <div id="one">
            <div id="two">
                <p>Inner</p>
            </div>
        </div>
        <button id="stop">Stop Propagation</button>
    </body>
</html>

查看全文

相关阅读:
shell脚本练习
 Linux 在线模拟器
 附件2：async/await
附件1：setTimeout与闭包
 Java基础复习(二、String相关)
Java基础复习（一、数据类型）
Java的自动装箱和拆箱
 牛客网
 创建新模块时遇到的几个问题
 Java 内存溢出（java.lang.OutOfMemoryError）的常见情况和处理方式总结

原文地址：https://www.cnblogs.com/wangwenfei/p/propagation.html