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

浏览器默认行为:

在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. [svc]免费证书认证

    1.申请免费域名(12个月) freenom.com 2.申请免费证书(3个月) git clone https://github.com/letsencrypt/letsencrypt cd let ...

  2. cocos2d-x 粒子动作 setTexture

    CCSize s = CCDirector::sharedDirector()->getWinSize(); CCNode* explosion = CCParticleSun::create( ...

  3. Debugging and performance,ETW

    http://blogs.technet.com/b/serverandtools/ https://channel9.msdn.com/Shows/Defrag-Tools http://blogs ...

  4. feginclient和ribbon的重试策略

    //自定义重试次数// @Bean// public Retryer feignRetryer(){// Retryer retryer = new Retryer.Default(100, 1000 ...

  5. Http请求中Content-Type讲解

    http://blog.csdn.net/weichuang_1/article/details/50451496 ****************************************** ...

  6. 《CCNA(640-802)全套课程讲义》笔记

    路由器: CLI(命令行界面)形式相对应的是GUI  (图形用户界面) DTE:数据终端设备,指的是位于用户网络接口的用户端设备,通常情况下,路由器端为DTE端. DCE:数据通讯设备,为通信提供时钟 ...

  7. IWDG—独立看门狗

    本章参考资料:<STM32F4XX 中文参考手册> IWDG 章节.学习本章时,配合<STM32F4XX 中文参考手册> IWDG 章节一起阅读,效果会更佳,特别是涉及到寄存器 ...

  8. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  9. 一款由html5 canvas实现五彩小圆圈背景特效

    之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码 ...

  10. 基于java反射的javabean和map相互转换的工具类

    话不多说,代码如下 package com.study; import java.lang.reflect.Field; import java.util.HashMap; import java.u ...