perventDefault, stopPropagation, stopImmediatePropagation 三者的区别
event有三种特别容易混淆的方法, 用来阻止默认事件的发生
1. e.preventDefault();
2. e.stopPropagation();
3. e.stopImmediatePropagation();
首先看这三个在MDN上的介绍
preventDefault: 如果当前event.cancelable属性为true, 则取消当前默认的动作, 但不阻止当前事件进一步传播.
stopPropagation: 阻止当前冒泡或者捕获阶段的进一步传播 .
stopImmediatePropagation: 阻止调用相同事件的其他监听器
1. e.preventDefault
下面一个例子, 当点击一个form中的 submit按钮提交表单时, 如果使用了 e.preventDefault , 就可以阻止表单提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form id="myForm" action="www.baidu.com" method="post">
<div>
<label for="name">姓名:</label>
<input type="text" id="name" />
</div>
<div>
<label for="mail">电子邮箱:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">消息:</label>
<textarea id="msg"></textarea>
</div> <div class="button">
<button type="submit">发送你的消息</button>
</div>
</form>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$('#myForm').on('submit', function(e) {
e.preventDefault(); // 什么都不会发生
});
</script>
</html>
此时使用e.preventDefault就能确保表单不会被提交, 但是他不能用来阻止来自冒泡阶段的submit或者点击事件, 下面两种方法就是为了解决这个问题的
注: 如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
2. e.stopPropagation
stopPropagation就是保证当前事件不在进一步冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冒泡</title>
<style type="text/css">
.box1 {
height: 400px;
width: 400px;
background: #f66;
}
.box2 {
height: 300px;
width: 300px;
background: #6f6;
}
.box3 {
height: 200px;
width: 200px;
background: #66f;
}
</style>
</head>
<body>
<div class="box1">
1
<div class="box2">
2
<div class="box3">3</div>
</div>
</div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$('.box1').on('click', function() {
alert('ok');
})
$('.box2').on('click', function(e) {
// e.preventDefault();
e.stopPropagation(); // 点击box2不会反应
})
$('.box3').on('click', function(e) {
// e.preventDefault();
e.stopPropagation(); // 点击box3不会反应
})
</script>
</html>
3. e.stopImmediatePropagation
以上两种方法已经解决了我们在处理事件中90%的问题, 接下来就介绍一种上面两种无法处理的情形
给一个标签添加两个 class, 一个是公共的class: item, 另一个是独有的class: element, 假设这两个class对当前网站的功能都很重要
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<a href="#" class="item element">点击</a>
</div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$('.item').on('click', function(e) {
console.log('item 被点击了');
});
$('.element').on('click', function(e) {
e.preventDefault(); // 此时链接不会跳转
e.stopPropagation(); // 此时事件冒泡被阻止
console.log('element 被点击了');
});
</script>
</html>
当我们点击<a>标签时
这个现象会发生是因为item与element在DOM中是被平等对待的,与a标签点击冒泡到父级div不同, 我们点击同时出发了item与element的事件, 此时使用stopPropagation无法阻止这种事件
$('.element').on('click', function(e) {
e.preventDefault(); // 此时链接不会跳转
e.stopImmediatePropagation(); // item的点击事件将被阻止
console.log('element 被点击了');
});
$('.item').on('click', function(e) {
console.log('item 被点击了');
});
perventDefault, stopPropagation, stopImmediatePropagation 三者的区别的更多相关文章
- string、Empty和null三者的区别
string.Empty和null三者的区别 本文转自 http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...
- android Activity类中的finish()、onDestory()和System.exit(0) 三者的区别
android Activity类中的finish().onDestory()和System.exit(0) 三者的区别 Activity.finish() Call this when your a ...
- 菜鸟，大牛和教主三者的区别（转自hzwer）
菜鸟,大牛和教主,三者的区别 对菜鸟来说题目有三种:会算法且能AC的,会算法但不能AC的,不会做的 对大牛来说题目有两种:会做的,不会做的 对教主来说题目有两种:能AC的,数据有错的 菜鸟提交WA了, ...
- UIColor，CGColor，CIColor三者的区别和联系
UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...
- /storage/sdcard， /sdcard， /mnt/sdcard 三者的区别
原文地址: /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别 - petercao - 博客园 http://www.cnblogs.com/bluestorm/ ...
- jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- String，StringBuilder，StringBuffer三者的区别
参考 String,StringBuilder,StringBuffer三者的区别 这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 1.运行速度 首先说运行速度,或者说是执行速 ...
- this指向和apply，call，bind三者的区别
一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...
- ava、Python和PHP三者的区别
Java.Python和PHP三者的区别 2017年07月15日 22:09:21 书生_AABB 阅读数:18994 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...
随机推荐
- python中闭包
闭包是指内层函数引用了外层函数的变量(参数也算变量),然后返回内层函数的情况,称为闭包(Closure). 闭包的特点是返回的函数还引用了外层函数的局部变量,所以,要正确使用闭包,就要确保引用的局部变 ...
- vim 删除
shift + $ :光标往后 shift + ^ :光标往前 shift + D 删除当前光标直到末尾
- NOI-1.1-04输出保留3位小数的浮点数
04:输出保留3位小数的浮点数 总时间限制: 1000ms 内存限制: 65536kB 描述 读入一个单精度浮点数,保留3位小数输出这个浮点数. 输入 只有一行,一个单精度浮点数. 输出 也只有一 ...
- 将scrapy项目运行在pycharm中
1.在scrapy项目中创建一个py脚本,且尽量在scrapy.cfg同级目录下.我创建的是begin.py 2.配置begin.py.写上这一句就相等于一点开始,就在终端上输入了scrapy cra ...
- [LeetCode&Python] Problem 107. Binary Tree Level Order Traversal II
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
- 人工智能-Selenium
Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Firefox.Mozilla Suite等 ...
- 2018.10.25 CCSP马拉松摸铜归来
24号体测跑50+1000米. 50米抢跑被罚重跑???然后老年人就只能吊着一口仙气跑第二次50米.然后跑1000米,然后再到宿舍收拾行李赶往地铁站,然后再冲到火车站...(卒) 宾馆,三人挤入二人房 ...
- P1373 小a和uim之大逃离（动态规划）
题目链接:传送门 题目大意: 一个N行M列的矩阵,从任意点开始往右或者往下走,每走一格获得所到达的格子的分数. 要求总步数必须为偶数.问有多少种走法,使得奇数步得到的总分和偶数步得到的总分对K+1取模 ...
- multi-head attention
■ 论文 | Attention Is All You Need ■ 链接 | https://www.paperweekly.site/papers/224 ■ 源码 | https://githu ...
- 环境变量、cp、mv、cat 等命令
1.环境变量: PATH 个人理解 环境变量,即是所有命令文件所存放的目录,或是人为的定义的目录,(命令文件所存放的目录,当输入一个命令的时候,系统会自动找到且不报错,并不需要输入绝对路径,来运行相关 ...