在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。

浏览器默认行为:

在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu.

a标签

1..停止事件冒泡

JavaScript代码

 //如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
return false;

2.阻止浏览器的默认行为

JavaScript代码

 element.onclick = function(event) {  

    event = event || window.event;   

 //如果提供了事件对象,则这是一个非IE浏览器 

 if (event&& event.preventDefault) {

   //阻止默认浏览器动作(W3C) 

         event.preventDefault();  

     } else { 

     //IE中阻止函数器默认动作的方式 

         window.event.returnValue = false;  

     }  

   //event.preventDefault?event.preventDefault():(event.returnValue = false);  

 }  

或者直接返回false:

element.onclick = function(event) {
//...
return false;
}

但是在使用return false时必须注意:
1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止。
2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。
3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。

注意:
有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,如:在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变,这个动作是发生在focus事件之前的,是focus事件处理程序中无法取消的。

摘自:http://blog.csdn.net/jquery_qq/article/details/51568816

http://www.cnblogs.com/yuzhongwusan/archive/2008/12/27/1363417.html

js 停止事件冒泡 阻止浏览器的默认行为的更多相关文章

  1. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  2. js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  3. js 停止事件冒泡 阻止浏览器的默认行为(比如阻止超连接 # )

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  4. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  5. javascript阻止事件冒泡和浏览器的默认行为

    1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...

  6. JS停止事件冒泡

    ..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopP ...

  7. JQuery 阻止js事件冒泡 阻止浏览器默认操作

    //阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...

  8. js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  9. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

随机推荐

  1. Oracle行转列SQL

      -- Create table /*create table TEST_TABLE ( STUDENT VARCHAR2(200), SUBJECT VARCHAR2(200), GRADE NU ...

  2. hdoj2037 今年暑假不AC

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. Not get deviceToken yet. Maybe: your certificate not configured APNs? or current network is not so good so APNs registration failed? or there is no APNs register code? Please refer to JPush docs.”

    今天在项目中集成了极光推送,一切都配置完毕,把程序运行起来的时候,报了下面的错误: Not get deviceToken yet. Maybe: your certificate not confi ...

  4. gvim配置到命令行可以使用

    下载安装gvim后,把gvim的安装目录添加到环境变量.

  5. 【C#】允许泛型方法<T>返回空值Null

    在设计一个返回类型为T的泛型方法时,有时希望能返回空Null,然后会报错: 根据提示,将返回值由Null改为default(T)即可. default(T)表示返回当前T类型的默认值,如果T为int则 ...

  6. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  7. Wireshark 分析捕获的数据记录

    使用 Wireshark 选取你要抓包的网络接口,并设置你的过滤器之后,当有数据通信后即可抓到对应的数据包,这里将分析其每一帧数据包的结构. 每一帧数据都有类似的结构组成,我这里使用抓到一个对应的pi ...

  8. Android Studio:Multiple dex files define Landroid/support/annotation/AnimRes

    近期真的比較忙,一不小心博客又荒了两个月. 从今天起.决定重返csdn,多多纪录和分享. 先从一个近期被折磨的死去活来的问题. 由于升级了V4包,就一直报这个问题: com.android.dex.D ...

  9. android 相机拍照后选择照片编辑,相片编辑界面直线形状会显示锯齿状

    因为 decode 出来的图片太小,小于屏幕.所以,显示的时候 会把图片略微放大,导致直线形状会显示锯齿状.   能够改动getScreenImageSize 方法中的size 的大小,比方能够把13 ...

  10. 上手并过渡到PHP7(2)——必须传递int, string, bool参数?没问题

    Type hints, Type safe 泊学实操视频 泊学原文链接PHP 7中最引人注目的新特性之一,无疑是Scalar type hints.我们可以在函数参数和返回值中使用scalar typ ...