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 三者的区别的更多相关文章

  1. string、Empty和null三者的区别

    string.Empty和null三者的区别 本文转自  http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...

  2. android Activity类中的finish()、onDestory()和System.exit(0) 三者的区别

    android Activity类中的finish().onDestory()和System.exit(0) 三者的区别 Activity.finish() Call this when your a ...

  3. 菜鸟，大牛和教主三者的区别（转自hzwer）

    菜鸟,大牛和教主,三者的区别 对菜鸟来说题目有三种:会算法且能AC的,会算法但不能AC的,不会做的 对大牛来说题目有两种:会做的,不会做的 对教主来说题目有两种:能AC的,数据有错的 菜鸟提交WA了, ...

  4. UIColor，CGColor，CIColor三者的区别和联系

    UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...

  5. /storage/sdcard， /sdcard， /mnt/sdcard 三者的区别

    原文地址: /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别 - petercao - 博客园 http://www.cnblogs.com/bluestorm/ ...

  6. jQuery中，$.extend，$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  7. String，StringBuilder，StringBuffer三者的区别

    参考   String,StringBuilder,StringBuffer三者的区别 这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 1.运行速度 首先说运行速度,或者说是执行速 ...

  8. this指向和apply，call，bind三者的区别

    一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...

  9. ava、Python和PHP三者的区别

    Java.Python和PHP三者的区别 2017年07月15日 22:09:21 书生_AABB 阅读数:18994   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

随机推荐

  1. Activity中通过标签获取当前Fragment

    初始化完成之后才有数据,否则获取不到 String tag = "android:switcher:"+viewPager.getId()+":"+viewPa ...

  2. 小波学习之二（单层一维离散小波变换DWT的Mallat算法C++实现优化）--转载

    小波学习之二(单层一维离散小波变换DWT的Mallat算法C++实现优化)   在上回<小波学习之一>中,已经详细介绍了Mallat算法C++实现,效果还可以,但也存在一些问题,比如,代码 ...

  3. js 数组去重的几种方式及原理

    let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,' ...

  4. springsecurity的remember me

    基于持久化的token的方法 实现原理:将生成的 token 存入 cookie 中并发送到客户端浏览器,待到下次用户访问系统时,系统将直接从客户端 cookie 中读取 token 进行认证. 实现 ...

  5. django中scrf的实现机制

    第一步:django第一次响应来自某个客户端的请求时,后端随机产生一个token值,把这个token保存在SESSION状态中,后端把这个token放到cookie中交给前端页面. 第二步:下次前端需 ...

  6. Day7作业及默写

    1. 判断一个数是否是水仙花数, 水仙花数是一个三位数, 三位数的每一位的三次方的和还等于这个数. 那这个数就是一个水仙花数. 例如: 153 = 1**3 + 5**3 + 3**3 InputNu ...

  7. ie 折腾计（浏览器兼容性）

    常见问题 IE:6.0,IE7.0,IE8.0之间的兼容独立说明 /*用于展示标签*/ <div class="jrx"></div> <style ...

  8. 2.34 jquery定位

    2.34 jquery定位(简直逆天) 前言元素定位可以说是学自动化的小伙伴遇到的一道门槛,学会了定位也就打通了任督二脉,前面分享过selenium的18般武艺,再加上五种js的定位大法.这些还不够的 ...

  9. 构建工具 —— Groovy 与 Gradle

    1. Gradle Gradle 是一个基于 Groovy 的构建工具,使用 Groovy 来编写构建脚本,类似 maven,支持依赖管理和多项目创建. 相比 maven,更轻量: windows c ...

  10. Python之路，第十篇：Python入门与基础10

    python3 函数 函数(function) 什么是函数: 函数是可以重复执行的代码块,可以重复使用: 作用: 定义用户级的函数:实现了一个代码块的封装: 语法: def   函数名(参数列表): ...