9_Vue事件修饰符( 二 ) _生活百科

事件修饰符 == .stop

文章插图
测试结果

文章插图
案例3_只触发一次的事件准备工作

文章插图
这有个按钮，简单设计下样式，事件还是刚刚的点击事件
测试结果

文章插图
需求我只想让他触发一次，点了以后可以继续点，但是事件不会继续触发了
事件修饰符 == .once

文章插图
测试结果

文章插图
不常用的事件修饰符案例4_使用事件的捕获模式补充知识在使用捕获模式之前我们需要先简单的了解下
关于js事件流，事件处理的捕获阶段和事件冒泡阶段
参考博文
准备工作我这里有个嵌套的div盒子，二者都设计了一个点击事件，并且都传递了参数

<!-- 4、使用事件捕获阶段 --><div class="box1" @click="toMsg(1)">box1<div class="box2" @click="toMsg(2)">box2</div></div>

事件设计

文章插图
简单设计下样式
.box1{height: 100px;background-color: #ff6700;padding: 5px;}.box2{height: 50px;background-color: #fff;}测试阶段

文章插图
需求

事件修饰符 == .capture注意：该修饰符的作用是，让事件所处的DOM元素，在事件捕获阶段触发
也就是：谁要在事件捕获阶段触发，那么就安在谁身上

文章插图
测试

文章插图
案例5_event.target是当前元素才能触发准备工作准备一个div盒子和按钮，二者共用一个点击事件

文章插图
该点击事件描述当前触发事件的DOM元素是谁

文章插图
测试

文章插图
需求

事件修饰符 == .self

这个修饰符的作用是：只有event.target，指向的DOM元素是该元素本身，那么才会触发这个事件
怎么说？
- 文章插图
- 对box的click事件进行修饰
- 只有event.target 的值为这个box的div时
- box的click事件才会被触发
说白了也可以阻止事件冒泡

测试

9_Vue事件修饰符( 二 )