20 六种事件修饰符：stop、prevent、capture、self、once和passive解决冒泡事件

以你之姓@ 2023-10-06 20:32 2阅读 0赞

#### \[基础\]Vue绑定事件详讲-事件修饰符 ####

*  通过修饰符解决冒泡事件
 *  stop修饰符
 *  self修饰符
 *  其它常用修饰符
 *  初始页面

绑定事件中的修饰符有很多种，这些修饰符各有各的用处。  
本节课将讲解6种Vue中的事件修饰符，分别是；  
`stop、prevent、capture、self、once和passive。`

## 通过修饰符解决冒泡事件 ##

在JavaScript中冒泡事件是最长处理的事件，先写一段代码，手动创造一个冒泡事件。  
新建一个文件Demo20.html

*  修改模板 `template` 部分，在最外层增加一个 `<div>` 并添加 `click` 事件。
 *  修改方法 `methods` 部分，删除无用方法，保留两个方法，增加 `alter` 提示。
 *  形成冒泡效果，就是有嵌套的DOM元素时，两个都有绑定事件，JS会自动向上传递事件。

## stop修饰符 ##

在Vue中要停止冒泡是非常简单的，只要加加一个事件修饰符stop就可以了。

<button @click.stop="addCountClick()">增加一位小伙伴</button>

## self修饰符 ##

除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。

template:`
            <div @click.self="handleBtnClick1">
                <div>目前已点报名的小伙伴数量{
         {count}}.</div>
                <button @click=" addCountClick()">增加一位小伙伴</button>
           </div>
            `

这时候你会发现点击那里，都没办法触发 `hanldeBtnClick1` 方法了，这是因为目前最外层div下都是独立的DOM元素，就是都有成对标签出现，都不属于最外自己，都是他们的子元素。

可以编写一段专属最外层DIV的文字。

template:`
            <div @click.self="handleBtnClick1">
                我是最外层的DIV文字
                <div>目前已点报名的小伙伴数量{
         {count}}.</div>
                <button @click=" addCountClick()">增加一位小伙伴</button>
           </div>
            `

这样当点击我是最外层的DIV文字时，就会触犯 `handleBtnClick1` 方法了。

![在这里插入图片描述][6975ec17d76a48b68efd324b1ee7a849.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo19</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
    const app=Vue.createApp({
         
        data(){
        
            return{
        
                count:0
            }
        },
        methods:{
        
            addCountClick(){
        
                this.count++
            },
            handleBtnClick1(){
        
                alert(1)
            },
        },
        template:`
            <div @click.self="handleBtnClick1">
                我是最外层的DIV文字
                <div>目前已点报名的小伙伴数量{
         {count}}.</div>
                <button @click=" addCountClick()">增加一位小伙伴</button>
           </div>
            `
    }) 
    const vm=app.mount("#app")
    </script>
    </html>

## 其它常用修饰符 ##

**prevent修饰符：**

阻止默然行为的修饰符，这个以前讲过，例如阻止form表单的默认提交行为。（不在重复介绍，如果你还没有掌握，可以复习以前课程）

**capture修饰符：**

改成捕获模式，默认的模式都是冒泡模式，也就是从下到上，但是你用capture后，是从上到下的。

修改一下模板部分的代码，不在使用修饰符，而是让事件存在冒泡。

methods:{
        
        addCountClick(){
        
            this.count++
            alert(0)  //修改了此处
        },
        handleBtnClick1(){
        
            alert(1)
        },
    },
    template:`
        <div @click.capture="handleBtnClick1">  //修改了此处
            我是最外层的DIV文字
            <div>目前已点报名的小伙伴数量{
         {count}}.</div>
            <button @click=" addCountClick()">增加一位小伙伴</button>
        </div>
        `

![在这里插入图片描述][91ae8e5b5aa94874b1b7c8577b77726f.gif_pic_center]  
**once修饰符：**

事件只执行一次

template:`
        <div @click.self="handleBtnClick1">
            我是最外层的DIV文字
            <div>目前已点报名的小伙伴数量{
         {count}}.</div>
            <button @click.once=" addCountClick()">增加一位小伙伴</button>
        </div>
        `

**此时再点击按钮，事件只执行一次。这时候我们修改了两个地方，最外层的事件加了self修饰符，button上加了once修饰符。**

passive修饰符：  
解决滚动时性能的修饰符，不太好演示，等以后用到我们会再详细讲解。

本文就先到这里了，我们学习了6种修饰符：`stop、prevent、capture、self、once、passive`。下节我们讲解按键修饰符。

## 初始页面 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo19</title>
        <script src="https://unpkg.com/vue@next" ></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app=Vue.createApp({
           
        data(){
          
            return{
          
                count:0
            }
        },
        methods:{
          
            addCountClick(){
          
                this.count++
            },
            handleBtnClick1(){
          
                alert(1)
            },
        },
        template:`
            <div @click="handleBtnClick1">
                <div>目前已点报名的小伙伴数量{
           {count}}.</div>
                <button @click=" addCountClick()">增加一位小伙伴</button>
           </div>
            ` 
        }) 
        const vm=app.mount("#app")
    </script>
    </html>

[6975ec17d76a48b68efd324b1ee7a849.gif_pic_center]: https://img-blog.csdnimg.cn/6975ec17d76a48b68efd324b1ee7a849.gif#pic_center
[91ae8e5b5aa94874b1b7c8577b77726f.gif_pic_center]: https://img-blog.csdnimg.cn/91ae8e5b5aa94874b1b7c8577b77726f.gif#pic_center