「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

大年初一，给大家拜年啦，祝大家新的一年虎力全开！ 🎇🎇🎇

vue点击事件

在vue中，点击事件和普通js是一样的，只是写法会有一点不同，普通js点击事件通常是 onclick

<button onclick="clickFn()">点我</button>
<script>
function clickFn(){
    alert("执行方法");
}
</script>

在vue中，使用的是v-on:click 或者 @click 这里意思是一样的，但是在同一个项目我们最好统一使用其中一种写法

<button v-on:click="clickFn">点我</button>
<button @click="clickFn">点我</button>

clickFn方法写在vue实例 methods 方法中即可

 methods: {
     clickFn(){
        alert("执行方法");
 },

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法，用特殊变量 $event 把它传入方法。event.preventDefault()方法阻止元素发生默认的行为

<button @click="clickFn('执行方法', $event)">点我</button>
clickFn(message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
        event.preventDefault()
    }
    alert(message)
}

事件修饰符

当我们没有使用事件修饰的时候，事件可能会发生像外层溢出的情况，举个例子

        <div class="box1" @click="clickBox1">
            box1
            <div class="box2" @click="clickBox2">
                box2
                <div class="box3" @click.stop="clickBox3">
                    box3
                </div>
            </div>
        </div>

给这三个框设置一下样式，使他们颜色不相同，便于区分

    <style>
        .box1{
            height: 300px;
            width: 300px;
            background-color: pink;
            line-height: 50px;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: rgb(235, 99, 122);
        }
        .box3{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>

点击事件

     clickBox1(){ console.log('clickBox1');},
     clickBox2(){ console.log('clickBox2');},
     clickBox3(){ console.log('clickBox3');}

当我们点击最里层 class="box3" 的div时，会依次触发clickBox3、clickBox2、clickBox1方法

.stop

.stop 阻止事件向外冒泡还是刚刚那个例子

<div class="box3" @click.stop="clickBox3">box3</div>

这时候点击 class="box3" 的div时，只会触发clickBox3方法

.prevent

.prevent 阻止默认行为，提交事件不再重载页面

 <a href="https://www.baidu.com" @click="linkClick">百度链接</a>
 <a href="https://www.baidu.com" @click.prevent="linkClick">百度链接</a>
 
 linkClick(){
    console.log("百度链接");     
},

前者执行 linkClick 函数并跳转到百度页面，后者执行 linkClick 函数但不跳转页面

修饰符可以串联

<a v-on:click.stop.prevent="linkClick"></a>

.once

.once 只触发一个事件处理函数

例如当使用 prevent 修饰符，会一直阻止默认行为，但使用 once 后只会阻止一次默认行为，也就是我们再次点击这个百度链接后会进行跳转

<a href="https://www.baidu.com" @click.prevent.once="linkClick">百度链接</a>

.capture

.capture 实现捕获触发事件的机制,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

        <div class="box1" @click="clickBox1">
            <div class="box2" @click.capture="clickBox2">
                <div class="box3" @click="clickBox3"></div>
            </div>
        </div>

这时候点击 class="box3" 的div时，触发方法的先后顺序改变，会先执行clickBox2方法

.self

.self 只有点击当前元素的时候才会触发事件处理函数

我们将 box2 设置 .self 看看效果发现点击 class="box3" 的div时，触发 clickBox3、 clickBox1 方法；点击 class="box2" 的div时，触发 clickBox2、 clickBox1 方法；即使用.self修饰符，只有点击这个方法才会触发

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

.passive

该修饰符表示就是设置{passive:true}，表示处理事件函数中不会调用preventDefault函数（如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生），就会减少了额外的监听，从而提高了性能；所以不能和.prevent修饰符一同使用，否则浏览器会报错。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

vue事件修饰符