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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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
关于PHP5 Session生命周期介绍
2010/03/02 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js获得参数的getParameter使用示例
2014/02/26 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python打印输出数组中全部元素
2018/03/13 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python实现微信防撤回神器
2019/04/29 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python接收手机短信的代码整理
2020/08/02 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
《寓言两则》教学反思
2014/02/27 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
银行委托书范本
2014/09/28 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
教师求职自荐信范文
2015/03/04 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python