js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件


Posted in Javascript onJanuary 27, 2014

1. event.preventDefault();  -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,

button,radio等表单元素的默认事件 ,

div 元素没有默认事件

例:

<a href="http://www.baidu.com" target="_black">百度</a>
var samp = document.getElementByTagName("a");

samp.addEventListener("click",function(e){e.preventDefault()},false);

解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。

2. event.stopPropagation();  -- 阻止元素冒泡事件

注:嵌套元素一般都存在冒泡事件,会带来某些影响

例:

<div id="c1" onclick="alert(1)">

<div id="c2" onlick="alert(2)">

<input type="button" id="c3" value="点击" onclick="alert(3)">

</div>

</div>

这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。

给input注册click事件,同时阻止它的冒泡事件

document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

OK!!!了

 PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
详解vue的diff算法原理
May 20 Javascript
详解vue axios二次封装
Jul 22 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 #Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
用javascript替换URL中的参数值示例代码
Jan 27 #Javascript
jquery选择器之基本过滤选择器详解
Jan 27 #Javascript
jquery选择器之层级过滤选择器详解
Jan 27 #Javascript
jquery选择器之内容过滤选择器详解
Jan 27 #Javascript
jquery选择器之属性过滤选择器详解
Jan 27 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
Yii学习总结之安装配置
2015/02/22 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python中reader的next用法
2018/07/24 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
html5-canvas中使用clip抠出一个区域的示例代码
2018/05/25 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
异常和异常类的概念
2014/09/12 面试题
Ref与out有什么不同
2012/11/24 面试题
化学教学随笔感言
2014/02/19 职场文书
共产党员公开承诺书
2014/03/25 职场文书
法定代表人授权委托书
2014/04/04 职场文书
开工仪式策划方案
2014/05/23 职场文书
募捐感谢信
2015/01/22 职场文书
会计岗位职责
2015/02/03 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
公证书
2019/04/17 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书