event中的stopPropagation和preventDefault
很多初学js的或者是很少用到阻止冒泡的或者是工作了蛮久还是对js并不是那么了解的童鞋,可能对stopPropagation和preventDefault的作用并不是那么清晰,在很多小伙伴都问了之后,决定还是把这两个小东西梳理出来。在梳理之前,我觉得我们有必要理解一下什么是冒泡。
来,先理论知识走起来!
一、DOM事件模型
一共有3个阶段:
1、捕获:从window开始,由外向内,依次记录各级元素绑定的事件处理函数。
强调:捕获阶段只到目标元素截止
2、目标触发:默认实际触发事件的元素上的处理函数先执行。
目标元素:实际触发事件的元素
3、冒泡:按照捕获阶段反向的顺序,从目标元素的上一级开始,依次执行各级父元素上的事件处理函数
注意:IE8的事件模型只有2个阶段:目标触发和冒泡。
二、什么是事件的默认行为
在我的理解内(若有理解不对的地方,欢迎交流,共同进步!),事件的默认行为就是没有用 js 定义过但是可以执行的原本就已经定义好的行为,例如点击 a 标签会跳转,点击 type=”text” 的 input 可以输入等等,这些都没有用 js 去定义过什么点击事件或者获取焦点事件或者其他什么事件,但依然可以实现点击跳转等这些行为,而这些就是事件的默认行为。
三、stopPropagation
取消冒泡:执行完当前元素的事件处理函数后,阻止冒泡向上执行
四、preventDefault
取消默认行为:阻止后续默认行为,在函数内放前放后,对当前函数无影响
对基本的理论有大致概念之后,那么我们现在通过一个栗子来了解它们带来的效果。
五、栗子分析
css部分:<style>a{display: inline-block;width: 200px;height: 100px;background-color: #953b39;} span{display: inline-block;background-color: #abbbbb;margin: 35px 70px;width: 60px;height: 30px;font-size: 20px;}
</style>html部分:<body><a href="http://blog.csdn.net"><span>看这里</span></a>
</body>
这是未加js的时候,效果图为:
现在给这个a元素和span元素分别添加点击事件:
var a = document.getElementsByTagName("a")[0];
var span = document.getElementsByTagName("span")[0];
a.onclick = function (e) {alert("click a");
};
span.onclick = function (e) {alert("click span");
}
此时点击span效果依次为:
“click span”->“click a”->跳转页面到http://blog.csdn.net
1、如果我们想要点击span,不触发a的点击事件,也就是想要的最终效果依次为:
“click span”->跳转页面到http://blog.csdn.net
那么,我们可以在span的点击事件中加上e.stopPropagation(),阻止点击事件冒泡到a上,代码如下:
span.onclick = function (e) {e.stopPropagation();alert("click span");
}
通俗点说,如果想要点击span不触发它父元素(所有父元素)上面的点击事件,可以加上e.stopPropagation()。
2、如果我们想要点击span,不让页面跳转,也就是想要的最终效果依次为:
“click span”->“click a”
那么,我们可以在span的点击事件中加上preventDefault,代码为:
span.onclick = function (e) {e.preventDefault();alert("click span");
}
也就是阻止了事件的默认行为。
3、如果想要点击span,只触发span的点击事件,也就是想要的最终效果为:
“click span”
那么,就可以把stopPropagation和preventDefault都加上,代码为:
span.onclick = function (e) {e.stopPropagation();e.preventDefault();alert("click span");
}
(分享完毕)
最后
我的心愿是
希望程序员不再头顶秃地,而是头顶茂密!
event中的stopPropagation和preventDefault相关推荐
- function(event)中的event详解
目录: 一.function(event)中的event是什么? 二.为什么要加上function(event)中的event? 三.如果需要引入别的参数,那要怎么获取function(event)中 ...
- 类中匿名函数如何从 event 中去除
匿名函数在各种event中如鱼得水的到处使用. 可是 把attach 到 Event 中的这些匿名函数 detach 是一个恼人的问题. 不建议在类的内部做一个 List<fn> , 这 ...
- NET问答: 如何从 event 中移除所有的 handler ?
咨询区 Carrick: 我知道在 Control 上如何新建一个 Handler. c.Click += new EventHandler(mainFormButton_Click); 或者这样 c ...
- js获取event中元素的data-值
event.currentTarget.dataset['kyyhj']
- WebQML笔记-qml获取canvas中元素是否被按下
以前出了几个用QWebView,获取html前端数据的博文, 使用QWebElement可以直接获取html中元素的填充的值. 在此不在多提.这个是纯QML获取canvas中元素是否被按下的思路. 这 ...
- Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
- 计算机图形学Web前端笔记-定位并移动到指定坐标点(two.js理论及实现)
这里先演示下效果笔记毕竟这是给理论及实践的博文. 当按下回车后 会到场景600,600中画个圆并且浏览器会移动到场景600,600的位置,并且这个位置将会是圆心. 同样,滑动滚轮进行放缩后,还是能进行 ...
- Web前端笔记-圆环随时间逐渐缩小(使用two.js)
这里给出效果图: 这里就给出截图,不搞gif了: 运行时: 这里主要是使用了setInterval去操作的,并且设置的timeout为0,这样的效果是比较好的. 关键代码如下: 画图相关文件: ;im ...
- Web前端笔记-two.js实现坐标定位(动画效果非瞬移定位)
先来看下程序运行截图: 画图相关代码: ;import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
最新文章
- Win10系列:JavaScript动画2
- ai ci ba logon use infomation
- opengles 3.0游戏开发_开发者们,快来测试Android Q啦!
- Spring AOP 五大通知类型
- postgresql模糊匹配正则表达式性能问题
- 在opencv3中实现机器学习之:利用svm(支持向量机)分类
- 弄懂 JRE、JDK、JVM 之间的区别与联系
- 图像处理-自适应的二值化图像
- vs2013产品密钥(所有版本)
- 认知神经科学常用的研究工具和技术
- Qmail加装自动杀毒(转)
- 关于集成网卡怎么设置pxe网卡启动
- 2023长江大学计算机考研信息汇总
- net configuration assistant 没反应_苗阜深夜发文:20年了没被打过,张玉浩,你已经离开青曲社了...
- 记一次win7 配置Windows Update 失败,还原更改,无法进入系统
- 张雪峰:创业团队极速发展过程中的分分合合
- ai时代不被取代的职业_如何在AI时代证明您的IT职业生涯
- android 8.1 wifi提示“已连接 但无法访问互联网“的解决办法
- 万维网互联网计算机网络的区别,万维网和互联网的区别_互联网、万维网、因特网之间有什么区别...
- 强化学习(RLAI)读书笔记第六章差分学习(TD-learning)