Vue事件修饰符（prevent，stop，once，capture，self）

1.Vue的事件修饰符：

1.prevent 阻止默认事件（常用）

2.stop:阻止默认冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素才是触发条件

2.修饰符演示：

1.prevent 阻止默认事件（常用）。

只弹出同学您好，没有跳转网页

2.stop:阻止默认冒泡（常用）

只弹出一次“同学您好”

3.once：事件只触发一次（常用）

触发一次后，再次点击不再触发

4.capture：使用事件的捕获模式

不加capture（先冒泡再捕获）

加capture（先捕获再冒泡）

5.self：只有event.target是当前操作的元素才是触发条件

没有self（冒泡弹出两次同学您好）

有self（冒泡弹出一次同学您好）

3.全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1 {padding: 5px;background-color: skyblue;}.box2 {padding: 5px;background-color: orange;}.list {width: 200px;height: 200px;background-color: aquamarine;overflow: auto;}li {height: 100px;}</style>
</head>
<body><div class="root"><h1>欢迎来到{{name}}学习</h1><!--                                 事件修饰符 --><a href="https:baidu.com" @click.prevent="showInfo">点我提示信息</a><!-- 阻止事件冒泡 --><div @click="showInfo" class="demo1"><a href="https:baidu.com" @click.stop.prevent="showInfo">点我提示信息</a><!-- 修饰符可以连续写 --></div><!-- 事件只触发一次 --><button @click.once="showInfo">点我提示信息</button><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div @click.self="showInfo" class="demo1"><button @click="showInfo">点我提示信息</button></div><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 --><ul class="list" @wheel="demo"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</body>
<script>Vue.config.productionTip = false;new Vue({el:'.root',data:{name:'男'},methods:{showInfo(){alert('同学你好')},showMsg(msg){console.log(msg);},demo(){for(let i = 0;i<1000;i++){console.log('#');}console.log('leisile');}}})
</script>
</html>
<!-- prevent 阻止默认事件（常用）stop:阻止默认冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素才是触发条件passive：事件的默认行为立即执行，无需等待事件回调执行完毕 优化多，移动端使用较多-->

Vue事件修饰符（prevent，stop，once，capture，self）相关推荐

vue事件修饰符：通过@click.capture捕获内层事件（爷爷-父亲-儿子）
vue事件符的.capture用法,含义是捕获. 先看一个4层结构的div盒子:div(最外层) > div(爷爷) > div(父亲) > div(儿子) <template ...
vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...

Vue事件修饰符（prevent，stop，once，capture，self）

1.Vue的事件修饰符：

2.修饰符演示：

1.prevent 阻止默认事件（常用）。

2.stop:阻止默认冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素才是触发条件

3.全部代码

Vue事件修饰符（prevent，stop，once，capture，self）相关推荐

最新文章

热门文章