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. SharePoint online Multilingual support - Development(1)

    博客地址:http://blog.csdn.net/FoxDave 上一节讲了SharePoint Online网站多语言的实现原理机制,本节主要从编程的角度来谈一下如何进行相关的设置. 下面列出 ...

  2. rancher中使用ingress-lbs做负载均衡

    rancher 相关资料 http://rancher.com/docs/rancher/v1.6/zh/kubernetes/ingress/ lvs, haproxy, nginx负载均衡器比较 ...

  3. VS2010，MFC动态按钮和窗体背景图片，以及是静态文字控件透明，并避免静态文字刷新出现的重叠问题

    1.动态按钮的四种动作 1)正常 2)按下 3)滑过 4)失效 在MFC中,4个动作对应着四种位图bmp, 首先,将代表四种状态的位图加载入资源中,将对应的按钮设置为BitmapButton 第二,在 ...

  4. IPFS的配置安装

    目录 1. IPFS简介 2. IPFS本地环境安装 2.1 下载ipfs压缩包 2.2 安装 3. 项目配置 3.1 创建ipfs节点 3.2 修改节点默认存储空间 3.3 查看节点id 3.4 启 ...

  5. JavaScript循环语句-6---for语句，while语句的应用逻辑

    JavaScript循环语句 学习目标 1.掌握for语句的语法结构 2.掌握for语句的应用逻辑 for语句 语法: For(语句1:语句2:语句3){ 被执行的代码块: } 语句1:在循环(代码块 ...

  6. DG备库缺失归档文件GAP日志

    问题现象: XXXsdgebus-dg GAP手工注册归档 #出现GAP idle>select * from v$archive_gap; THREAD# LOW_SEQUENCE# HIGH ...

  7. FreeModbus LINUXTCP Compile ERROR

    /********************************************************************************* * FreeModbus LINU ...

  8. 【编程基础】编译器 cc、gcc、g++、CC 的区别

    参考 1. 编译器 cc.gcc.g++.CC 的区别; 完

  9. 求强连通分量Tarjan算法

    ]; // 时间戳 ; // 时间 ]; // 节点u所能访问到的最小时间戳 ]; // 节点u是否在栈中. ]; ; // 我们维护的信息. ]; // 给节点染色, 同一个连通块的节点应该是同一个 ...

  10. Gym101002 2016NAIPC（队内第7次训练）

    (由于先看的最后一题,然后又一直WA,导致这场有点爆炸,我背锅. A .Fancy Antiques 题意: 选择最多k个商店,买n个物品,每个物品分别对应两个店售卖,求最小花费是多少.n<10 ...