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 相关文章推荐
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
JavaScript实现简单轮播图效果
Dec 01 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
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
如何提高数据访问速度
2016/12/26 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python多线程和队列操作实例
2015/06/21 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python判断自身是否正在运行的方法
2019/08/08 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
领导的自我鉴定
2013/12/28 职场文书
技能比赛获奖感言
2014/02/14 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
工作会议方案
2014/05/21 职场文书
单位工资证明范本
2015/06/12 职场文书
高三化学教学反思
2016/02/22 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python