1,stop修饰符:阻止事件冒泡

首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO

当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下

现在我们在click后面添加.stop修饰符,如下:

我们发现再次点击按钮后,事件不再冒泡,控制台只打出

2.prevent取消默认事件

.prevent等同于JavaScript的event.preventDefault(),用于取消默认事件。比如我们页面的<a href="#">标签,当用户点击时,通常在浏览器的网址列出#:

3.capture 捕获事件

H5中事件的传播是从外到内的,冒泡是从内到外的,如图

capture可以在事件的传播中对事件进行补获,修改代码如下:

点击按钮发现结果为,outter,inner

4.self

修饰符.self只会触发自己范围内的事件,点击子组件不会触发该组件上的事件

当点击按钮和中部div时,不会触发外部div的click事件,只有直接点击外部div时才会触发

(二)咋使用VUE中的事件修饰符的更多相关文章

  1. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  2. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  3. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

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

  4. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  5. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  6. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  7. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  8. Vue指令之事件修饰符

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

  9. vue中的.native修饰符

    如果你想在某个组件的根元素上绑定事件,直接使用 @click=''function' 是不生效的,我们可以添加.native修饰符 @click.native=''function'',请看以下dem ...

随机推荐

  1. iOS相关

    1. fastlane a collection of tools that help you automate building and releasing iOS and Android apps ...

  2. 01篇ELK日志系统——升级版集群之elasticsearch集群的搭建

    [ 前言:以前搭了个简单的ELK日志系统,以我个人的感觉来说,ELK日志系统还是非常好用的.以前没有弄这个ELK日志系统的时候,线上的项目出了bug,报错了,要定位错误是什么,错误出现在哪个java代 ...

  3. Jpa的简介

    Jpa:是用于数据持久化的一组标准接口. 1.HelloWorld的编写 创建EntityManagerFactory 创建EntityManager 开启事务 数据持久化 提交事务 关闭Entity ...

  4. VMWare共享文件夹使用

    1. 先在windows中创建一个文件夹,使用英文名称. 2. VMWare中,菜单栏 虚拟机->设置 3. Linux中的访问目录  /mnt/hgfs/winshare winshare  ...

  5. python打印带颜色字体

    设置颜色开始 :\033[显示方式;前景色;背景色m 前景色 背景色 颜色 30 40 黑色 31 41 红色 32 42 绿色 33 43 黃色 34 44 蓝色 35 45 紫红色 36 46 青 ...

  6. 【会话技术】Cookie技术 案例:访问时间

    创建时间:6.30 代码: package cookie; import java.io.IOException; import java.text.SimpleDateFormat; import ...

  7. SRT字幕格式

    [时间:2019-03] [状态:Open] [关键词:字幕,SRT,文件格式] 0 引言 视频文件中最简单.最常见的外挂字幕格式是SRT(SubRip Text).本人找了好久也没找到类似的标准文档 ...

  8. 网站调试时记得关闭火狐adblock插件

    由于特殊需要,xmyanke需要在网站右侧添加一个弹窗,第一个网站加上代码后可以正常显示,第二个网站却怎么也看不到图片,同样的安装方法为什么差别那么大呢?重新复制代码还是不行,再试一遍,依然如此,wi ...

  9. 【MyEclipse】安装svn插件

    svn插件包下载:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 重启myeclipse 看import就 ...

  10. python合并字典

    给定一个字典,然后计算它们所有数字值的和. 实例 1 : 使用 update() 方法,第二个参数合并第一个参数 def Merge(dict1, dict2): return(dict2.updat ...