Vue常见的事件修饰符

╰+攻爆jí腚メ 2023-09-24 22:31 65阅读 0赞

## 前言 ##

vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个

1.prevent:阻止默认事件(常用)
    2. stop:阻止事件冒泡(常用)
    3. once:事件只触发一次(常用)
    4.captrue:使用事件的捕捉模式(不常用)
    5.self:只有event.target是当前操作的元素时才触发事件(不常用)
    6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)

## 阻止默认事件(常用) ##

首先写一个简单的例子，一个简单的超链接标签，我们给一个百度链接和一个单击事件

![在这里插入图片描述][96de8cd794c8424180ccc8d26b81334c.png]

查看页面，虽然点击文字出现了弹窗，但是随之跳到了超链接指向的地址

![在这里插入图片描述][bcd423aee70c4be8b352773027651f37.png]

![在这里插入图片描述][9c7fba8f819a40c8b6e2c787b16ff7be.png]

跳转到链接是a标签的默认行为，那么我们怎么阻止这个默认行为呢？

### 普通阻止默认行为方式 ###

使用参数对象的preventDefault方法

![在这里插入图片描述][dee5688c12fa47289c4d1392501420ed.png]

这时候浏览器点击文字提示弹框后就不会跳转了

### vue阻止默认行为方式 ###

在vue中，不用我们亲自编写上面的方式，我们可以在事件名称后面跟一个.prevent就可以阻止默认行为了，效果都是一样的

<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

![在这里插入图片描述][c56bc0a2e826496c9cc0de794eeea460.png]

## 阻止事件冒泡(常用) ##

编写代码，实现例子

![在这里插入图片描述][869c5c0159a84f9e842abb9abd50879b.png]

我们发现，单击玩确定后会继续弹窗，这就是一个冒泡事件

![在这里插入图片描述][c57d65c2f979429891d585fa03628543.png]

阻止的方式和上一个例子类似，我这里以及下面都用vue特定的阻止行为了

我们在单击事件前面加上.stop

<button @click.stop="showInfo">点我提示信息</button>

![在这里插入图片描述][415aef5f6f5a41ddbcc258dac1900614.png]

再次验证浏览器，解决问题

## 事件只触发一次(常用) ##

编写代码

![在这里插入图片描述][8e843d499cd3423bbe341c1c8e16bfee.png]

如图，按钮点击多少次，就会弹窗多少次

![在这里插入图片描述][14d1c11f22c240008ba36c50e1653355.png]

我们加上once修饰符

<button @click.once="showInfo">点我提示信息</button>

## 使用事件的捕捉模式 (不常用) ##

![在这里插入图片描述][05f8bbe3c85e4340a70f66fd8c5b9cfe.png]

<div class="box1" @click.capture="showMsg(1)">
            div1 
            <div  class="box2" @click="showMsg(2)">
                div2
            </div>
          </div>

![在这里插入图片描述][c2df593f0fc144bd9bf74aa46ee57a93.png]

## 只有event.target是当前操作的元素时才触发事件(不常用) ##

<div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

![在这里插入图片描述][c32ccef6d4584b06a7ecf644c23f82d8.png]

![在这里插入图片描述][ddda38e34a454bea91fdb2f8bba8b629.png]

## 事件的默认行为立即执行，无需等待事件回调执行完毕不常用) ##

![在这里插入图片描述][a854c51188bb468b9b0859cc4a01c25e.png]

![在这里插入图片描述][6466315781664bd6828434fd4dd15edf.png]

## 扩展：多个修饰符使用小技巧 ##

比如现在有个需求，我们知道点击超链接后会弹窗然后跳转到指定的url，那么我们又想阻止冒泡，又想阻止默认行为，该怎么办呢？

![在这里插入图片描述][6d2e04c8fa3840fda30a86d8d2c1a7b4.png]

我们可以多个修饰符一起使用，比如

// 多个事件修饰符一起使用，可以随意顺序
     <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

![在这里插入图片描述][e79f26326d7a4dc092c58038815ab61d.png]

页面上只会弹窗就不跳转了

## 总结 ##

个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料

[96de8cd794c8424180ccc8d26b81334c.png]: https://img-blog.csdnimg.cn/96de8cd794c8424180ccc8d26b81334c.png
[bcd423aee70c4be8b352773027651f37.png]: https://img-blog.csdnimg.cn/bcd423aee70c4be8b352773027651f37.png
[9c7fba8f819a40c8b6e2c787b16ff7be.png]: https://img-blog.csdnimg.cn/9c7fba8f819a40c8b6e2c787b16ff7be.png
[dee5688c12fa47289c4d1392501420ed.png]: https://img-blog.csdnimg.cn/dee5688c12fa47289c4d1392501420ed.png
[c56bc0a2e826496c9cc0de794eeea460.png]: https://img-blog.csdnimg.cn/c56bc0a2e826496c9cc0de794eeea460.png
[869c5c0159a84f9e842abb9abd50879b.png]: https://img-blog.csdnimg.cn/869c5c0159a84f9e842abb9abd50879b.png
[c57d65c2f979429891d585fa03628543.png]: https://img-blog.csdnimg.cn/c57d65c2f979429891d585fa03628543.png
[415aef5f6f5a41ddbcc258dac1900614.png]: https://img-blog.csdnimg.cn/415aef5f6f5a41ddbcc258dac1900614.png
[8e843d499cd3423bbe341c1c8e16bfee.png]: https://img-blog.csdnimg.cn/8e843d499cd3423bbe341c1c8e16bfee.png
[14d1c11f22c240008ba36c50e1653355.png]: https://img-blog.csdnimg.cn/14d1c11f22c240008ba36c50e1653355.png
[05f8bbe3c85e4340a70f66fd8c5b9cfe.png]: https://img-blog.csdnimg.cn/05f8bbe3c85e4340a70f66fd8c5b9cfe.png
[c2df593f0fc144bd9bf74aa46ee57a93.png]: https://img-blog.csdnimg.cn/c2df593f0fc144bd9bf74aa46ee57a93.png
[c32ccef6d4584b06a7ecf644c23f82d8.png]: https://img-blog.csdnimg.cn/c32ccef6d4584b06a7ecf644c23f82d8.png
[ddda38e34a454bea91fdb2f8bba8b629.png]: https://img-blog.csdnimg.cn/ddda38e34a454bea91fdb2f8bba8b629.png
[a854c51188bb468b9b0859cc4a01c25e.png]: https://img-blog.csdnimg.cn/a854c51188bb468b9b0859cc4a01c25e.png
[6466315781664bd6828434fd4dd15edf.png]: https://img-blog.csdnimg.cn/6466315781664bd6828434fd4dd15edf.png
[6d2e04c8fa3840fda30a86d8d2c1a7b4.png]: https://img-blog.csdnimg.cn/6d2e04c8fa3840fda30a86d8d2c1a7b4.png
[e79f26326d7a4dc092c58038815ab61d.png]: https://img-blog.csdnimg.cn/e79f26326d7a4dc092c58038815ab61d.png