JavaScript阻止事件冒泡示例分享


Posted in Javascript onDecember 28, 2014

之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利。涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功。不过我发现FF支持e.cancelBubble = true;的写法,经测试可行。就把代码贴在这里吧,省得以后到处找。IE以前版本的兼容性还没测试,用到时再完善吧。

 

//取消事件冒泡

function stopBubble(e) {

    var evt = (e) ? e : window.event;//兼容FF

    evt.cancelBubble = true;  //evt.stopPropagation();  FF下阻止冒泡,据说可以用

};

另:

1、cancelBubble(HTML DOM Event 对象属性) :如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。

2、stopPropagation(HTML DOM Event 对象方法):终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

3、 preventDefault(HTML DOM Event 对象方法)通知浏览器不要执行与事件关联的默认动作。

例子:
    function stopBubble(e) 
    { 
        if (e && e.stopPropagation) 
            e.stopPropagation() 
        else
            window.event.cancelBubble=true
    } 

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

Javascript 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
package.json各个属性说明详解
Mar 11 Javascript
js实现全选和全不选功能
Jul 28 Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python 从相对路径下import的方法
2018/12/04 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
Python eval函数原理及用法解析
2020/11/14 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
教师自我鉴定范文
2013/11/10 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
项目安全员岗位职责
2015/02/15 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
详解Spring事件发布与监听机制
2021/06/30 Java/Android