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. Java 8 Time Api 使用指南-珍藏限量版

    前面写过了Stream和Lambda,最近正想写Java 8的Time Api,小胖哥这个文章写得很好,就偷懒转载了. 1.概述 Java 8为Date和Time引入了新的API,以解决旧java.u ...

  2. python循环删除列表元素留一个问题

    https://www.cnblogs.com/baihualin/p/10698651.html 引用up

  3. 使用Git Flow规范!

    Git Flow常用的分支 Production 分支 也就是我们经常使用的Master分支,这个分支最近发布到生产环境的代码,最近发布的Release, 这个分支只能从其他分支合并,不能在这个分支直 ...

  4. MySQL基本库表管理

    基本管理指令 mysql登陆 第一种 [root@wei ~]# mysql -u root -p 第二种(带参输入) [root@wei ~]# mysql -uroot -proot 注意:每个命 ...

  5. linux查看磁盘类型(是否SSD盘)

    介绍两种方法: 第一种: cat /sys/block/sda/queue/rotational 注意: 命令中的sba是你的磁盘名称,可以通过df命令查看磁盘,然后修改成你要的 结果: 返回0:SS ...

  6. 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...

  7. Idea如何快速生成Junit测试类

    测试是保证代码必不可少的环节,自己构建测试方法太慢,并且命名也不规范,idea中提供了,一键构建测试结构的功能... 2.步骤 1.在需要做测试的类的当前窗口,直接按快捷键:按ctrl+shift+t ...

  8. 21-C#笔记-名称空间

    和C++不同的地方: 1. 访问内部成员的方式使用 点 namespace_name.item_name; 2. using 的语法 using System; 参考: http://www.runo ...

  9. Scrapy的中间件(一)

    中间件是Scrapy里面的一个核心概念.使用中间件可以在爬虫的请求发起之前或者请求返回之后对数据进行定制化修改,从而开发出适应不同情况的爬虫. "中间件"这个中文名字和前面章节讲到 ...

  10. JQuery校验时间大小

    常用于按时间条件(起始日-截止日)查询时,进行校验 function checkDate(){ var startTime = $('#startTime').val(); var endTime = ...