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 处理事件绑定的一些兼容写法
Dec 24 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php生成xml简单实例代码
2009/12/16 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
Display SQL Server Version Information
2007/06/21 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
linux面试相关问题
2013/04/28 面试题
超市总经理岗位职责
2014/02/02 职场文书
小学一年级评语大全
2014/04/22 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
单位婚育证明范本
2014/11/21 职场文书
听证会主持词
2015/07/03 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python