zoukankan      html  css  js  c++  java
  • javascript冒泡和默认事件

    对于javascript的冒泡,我一直误解它了,

    冒泡,即是从底层往外blow blow blow ...

    惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件……

    贴上一串代码以便往后回顾!

     1 <script type="text/javascript">
     2 window.onload=function(){
     3 var a=document.getElementById("a");
     4 var b=document.getElementById("b");
     5 var c=document.getElementById("c");
     6 var c=document.getElementById("d");
     7 
     8     a.onclick=function(e){
     9         this.style.background="#000";    
    10         };
    11     
    12     b.onclick=function(e){
    13             this.style.background="#ccc";
    14             //阻止事件冒泡
    15             window.event.cancelBubble = true;//IE8以下
    16             e.stopPropagation();
    17         };
    18         
    19     d.onmousedown=function(e){
    20         //阻止默认事件,比如在chrome下图片有拖拽默认行为
    21         window.event.returnValue = false;
    22         e.preventDefault();
    23     }
    24 }
    25 
    26 
    27 
    28 </script>
    Html部分
    1 <div id="a" style="300px;height:300px;background:red;overflow:hidden;">
    2     <div id="b" style="200px;height:200px;background:green;margin:50px 0 0 50px;overflow:hidden;">
    3         <div id="c" style="100px;height:100px;background:yellow;margin:50px 0 0 50px;overflow:hidden;">
    4             <img src="240x240.jpg" width="50" height="50" id="d" />
    5         </div>
    6     </div>
    7 </div>

     另一个例子:

    <script type="text/javascript">
    window.onload=function(){
        document.getElementById("test").addEventListener('click',function(e){
            alert('aaaa')
        },false);
        
        document.getElementById("test1").addEventListener('click',function(e){
            alert('bbb')
            e.stopPropagation();
        },false)
    }
    </script>
    <style type="text/css">
    #test1{width:100px;height:100px;background:#ff0}
    #test2{width:100px;height:100px;background:#ff0}
    </style>
    <div id="test" style="100px;height:100px;background:#f60;padding:20px;">
        <div id="test1"></div>
    </div>
  • 相关阅读:
    我的Java设计模式-原型模式
    我的Java设计模式-观察者模式
    我的Java设计模式-建造者模式
    我的Java设计模式-单例模式
    我的Java设计模式-工厂方法模式
    菜鸟必备教程,ajax与xml交互传输数据。
    javascript Date format(js日期格式化)
    用script实现内容显示,并使用json传输数据
    使用jquer获取当前时间,并赋值到input上。
    利用js获取时间并输出值
  • 原文地址:https://www.cnblogs.com/w3develop/p/3045030.html
Copyright © 2011-2022 走看看