• .stop 阻止冒泡(阻止事件向外层冒泡)

  • .prevent 阻止默认事件(链接跳转、表单提交)

  • .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件)

  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调

  • .once 事件只触发一次

注意:

1.once和prevent的先后顺序不会影响结果

2.self和stop的区别

四个div从内层到外层分别为:div1~div4,各绑定一个点击事件

当点击div2时,会发生事件冒泡,依次触发了div2、div3、div4

stop阻止了(使用该修饰符的元素引发的)所有的冒泡行为。但不能阻止其内层元素冒泡造成的其事件触发。

例子:为div2添加stop修饰符,当点击div2时,不再产生div2引起的事件冒泡行为,只触发了div2;当点击div1时,div1会引发事件冒泡,导致div2的事件触发,但是不再继续冒泡,最终触发了div1和div2。

self是阻止(冒泡到使用该修饰符的元素的本身的)冒泡行为。只有点击这个元素本身才会触发这个元素绑定的事件,然后继续向上冒泡。它内部元素的冒泡不会使它绑定的事件触发,但会继续往外冒泡。

例子:为div2添加self修饰符,当点击div2时,触发了div2、div3、div4;当点击其内部的div1时,触发了div1,viv3,div4。

Vue学习笔记【6】——事件修饰符的更多相关文章

  1. 学习Vue第三节,事件修饰符stop、prevent、capture、self、once

    事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发回调 .once 事 ...

  2. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  3. Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

    1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click ...

  4. 0025 Java学习笔记-面向对象-final修饰符、不可变类

    final关键字可以用于何处 修饰类:该类不可被继承 修饰变量:该变量一经初始化就不能被重新赋值,即使该值跟初始化的值相同或者指向同一个对象,也不可以 类变量: 实例变量: 形参: 注意可以修饰形参 ...

  5. HTML学习笔记5:修饰符和特殊标签

    ①修饰符:     作用:修饰显示的方式,并不改变网页的结构,需要修饰的内容写在修饰标签内     常用文字和段落修饰符: 文字斜体:<i></i>  或  <em> ...

  6. SAS学习笔记33 格式修饰符

    冒号(:)格式修饰符 从非空格开始读取变量所对应的数据,直到满足以下任何一种情况 遇到下一个空格列 对应变量所定义的长度已经读满 数据行结束 &格式修饰符 修饰所读取为字符型的列数据中含有一个 ...

  7. 吴裕雄--天生自然C++语言学习笔记:C++ 修饰符类型

    C++ 允许在 char.int 和 double 数据类型前放置修饰符.修饰符用于改变基本类型的含义,所以它更能满足各种情境的需求. 下面列出了数据类型修饰符: signed unsigned lo ...

  8. 第二章 Vue快速入门--12 事件修饰符的介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. Vue.js-03:第三章 - 事件修饰符的使用

    一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...

  10. Vue事件修饰符详解

    整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,于是查阅了资料,现在记录下来与大家分享 先给大家画一个示意图理解一下冒泡和捕获 (1) .stop修饰符 请看如下 ...

随机推荐

  1. FastDFSClient上传图片工具类

    package cn.lijun.core.util; import org.apache.commons.io.FilenameUtils;import org.csource.common.Nam ...

  2. POJ 2299 Ultra-QuickSort (树状数组+离散化 求逆序数)

    In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a seque ...

  3. cf round#598 CDEF

    C:模拟:未跳到目的地之前先贪心放板子,能到达目的地后紧贴着放板子 先判能不能跳到目的地,能跳到再考虑是否需要将后面的板子往前移动 #include<bits/stdc++.h> usin ...

  4. mysql性能查看 命中率 慢查询

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  5. C#排列组合类,写彩票算法的朋友们可以来看一看

    public class PermutationAndCombination<T>    {        /// <summary>        /// 交换两个变量    ...

  6. oracle 中和mysql的group_concat有同样作用的写法

    所有版本的oracle都可以使用select wm_concat(name) as name from user;但如果是oracle11g,使用select listagg(name, ',') w ...

  7. Python错误 importModuleNotFoundError: No module named 'Crypto'

    0x00经过 今天在python中导入模块的用     from Crypto.Cipher import AES 的时候出现了找不到模块的错误. 百度了很长时间有很多解决方法,但是因不同的环境不同的 ...

  8. Find a Way (双bfs)

    Pass a year learning in Hangzhou, yifenfei arrival hometown Ningbo at finally. Leave Ningbo one year ...

  9. 5.如何使用jmeter参数话

    参数化:简单的来理解一下,我们录制了一个脚本,这个脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者更好的模拟多个用户来登录系统.这个时候就需要对用户名和密码进行参 ...

  10. AWS使用教程

    AWS使用教程 一.注册登录(https://portal.aws.amazon.com/billing/signup) 准备资料:信用卡(visa卡).电子邮箱.手机号 1.填写账号名和密码 2.填 ...