当前位置:  编程技术>.net/c#/asp.net

关于javascript冒泡与默认事件的使用详解

    来源: 互联网  发布时间:2014-10-20

    本文导语:  对于javascript的冒泡,我一直误解它了, 冒泡,即是从底层往外blow blow blow ... 惭愧的是,我一直以为阻止冒泡是阻止父元素往子元素传递事件…… 贴上一串代码以便往后回顾! 代码如下: window.onload=function(){ var a=document.getEleme...

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

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

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

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

代码如下:


 window.onload=function(){
 var a=document.getElementById("a");
 var b=document.getElementById("b");
 var c=document.getElementById("c");
 var c=document.getElementById("d");

     a.onclick=function(e){
         this.style.background="#000";   
         };

     b.onclick=function(e){
             this.style.background="#ccc";
             //阻止事件冒泡
             window.event.cancelBubble = true;//IE8以下
             e.stopPropagation();
         };

     d.onmousedown=function(e){
         //阻止默认事件,比如在chrome下图片有拖拽默认行为
         window.event.returnValue = false;
         e.preventDefault();
     }
 }

 

 

代码如下:

Html部分
 

    

        

            
        

    

 


另一个例子:
代码如下:


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)
}


代码如下:


#test1{width:100px;height:100px;background:#ff0}
#test2{width:100px;height:100px;background:#ff0}


   



    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • Javascript 游戏引擎 cocos2d javascript
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • JavaScript的OAuth开发包 OAuth in JavaScript
  • javascript 添加到收藏夹和书签代码示例
  • Javascript 调试插件
  • javascript eval换成document.write 显示原型
  • JavaScript图表 JScharts
  • 通过javascript库JQuery实现页面跳转功能代码
  • JavaScript 开发环境 UltraREPL
  • oracle iis7站长之家
  • JavaScript 模板引擎 templayed.js
  • JavaScript实现页面跳转的几种方法(参考代码)
  • Pretty Beautiful Javascript
  • JavaScript中的消息框(警告框,确认框,提示框)语法
  • JavaScript 微处理器 Espruino
  • JavaScript InfoVis Toolkit
  • JavaScript 调试工具 JSDT
  • JavaScript图表组件 dhtmlxChart
  • javascript矩阵运算库 Sylvester
  • JavaScript开发插件 JSEclipse


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3