Vue10-事件修饰符

一、示例：<a>标签不执行默认的跳转行为

1-1、方式一

 <a href="http://www.baidu.com" onclick="event.preventDefault();">点击我</a>

1-2、方式二

1-3、方式三：事件修饰符

二、Vue的六种事件修饰符

2-1、prevent：阻止默认事件（常用）

    <div id="root"><a href="http://www.baidu.com" @click.prevent="showInfo1">点击我1</a><br><!-- 或者 --><a href="http://www.baidu.com" @click="showInfo2">点击我2</a></div><script>new Vue({el:'#root',methods:{showInfo1(){alert('milklove1');},showInfo2(e){e.preventDefault();alert('milklove2');}}})</script>

2-2、stop：阻止事件冒泡（常用）

1、冒泡事件

        <div class="div1" @click="showInfo2"><button @click="showInfo2">点我提示信息</button></div>

此时会弹两次窗口！

2、阻止冒泡事件

方式一：

方式二：

注意，要是div外面还有一层，也会弹窗，则div也需要加stop修饰符。

2-3、once：事件只触发一次（常用）

2-4、capture：事件捕获模式

事件流分为捕获阶段、冒泡阶段；

先捕获、再冒泡（冒泡阶段再处理事件。）

需求：希望在捕获阶段就处理事件

此时，点击div2，会输出：1,2

2-5、self

此时会发生冒泡，但是两次冒泡的event.target都是<button>！ 

意思是：点击div，而且，event.target是这个div时，才执行这个点击事件的函数。

此方式也能阻止冒泡。

2-6、passive 

添加滚动事件：

1、滚动条的滚动

2、鼠标滚动轮的滚动

此时，即使鼠标拖动滚动条滚动，但是没有操作滚轮，事件也不会触发。

滚轮滚动后，log一直在打印，但是滚动条没有动！只有demo函数处理完，滚动条才动。

此时滚动条有限滚动，log在后台慢慢打印。

三、修饰符连着写

先停止冒泡，再阻止默认事件。

也能交换位置！效果一样。