前端应用_Vue_用示例代码解释五大>>事件修饰符(.stop,.prevent,.capture,.self,.once)

最新推荐文章于 2024-07-24 11:18:57 发布

上海_彭彭

最新推荐文章于 2024-07-24 11:18:57 发布

阅读量1k

点赞数 2

分类专栏： Vue.js 文章标签： vue 事件修饰符 stop prevent capture self once

本文链接：https://blog.csdn.net/qq_34979346/article/details/98618051

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

概况如下

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身触发时触发回调
.once 事件只能触发一次

示例代码表现如下：

当点击 save button 的时候，会冒烟弹出三句话，依次为

button > small_box > big_box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: gold;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin:50px auto;
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp" class="box" @click="big_box">
    <div class="box2"  @click="small_box">
         <input type="button" :value=value :title=title @click="button">
    </div>
</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'    ,
                    title:'我是一个可以点击的button',
                    value:'SAVE',
                },
                methods:{
                    big_box: function () {
                        console.log("我是外层的")
                    },
                    small_box: function () {
                         console.log("我是里层的")
                    } ,
                    button: function () {
                         console.log("我只是一个button，请注意了")

                    }
                }
            }
        )
    </script>

</div>
</body>
</html>

显示的效果如下：
在这里插入图片描述

.stop 阻止冒泡

上边的示例已经表明存在冒泡，如果想阻止冒泡就需要在 button 加上.stop:

@click.stop=“button”

点点击 save button 的效果如下：

我只是一个button，请注意了

其他两个不显示出来，但是如果点里层的，照样有冒炮，比如我点击里层的，外层也照样显示.

.prevent 阻止默认事件

什么是默认事件呢比如我写个 a 标签他默认是跳转的，如果加上 .prevent 就可以在跳转之前加上
自己的事件，保证显示咱们自己的行为.
下边我加个 a 标签，并绑定a 的事件，看看行为如何，自己点击尝试下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            background-color: gold;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: pink;
            margin:50px auto;
        }
    </style>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
</head>
<body>
<div id="pp" class="box" @click="big_box">
    <div class="box2"  @click="small_box">
         <!--<input type="button" :value=value :title=title @click.stop="button">-->
        <a href="https://www.baidu.com"  @click="link">百度一下，你就知道</a>
    </div>
</div>
<div>
    <script>
        var vue=new  Vue(
            {
                el:'#pp',
                data:{
                    message: 'Hello,Vue',
                    message2:'<h1>我是一个超大的head，请避让下</h1>'    ,
                    title:'我是一个可以点击的button',
                    value:'SAVE',
                },
                methods:{
                    big_box: function () {
                        console.log("我是外层的")
                    },
                    small_box: function () {
                         console.log("我是里层的")
                    } ,
                    button: function () {
                         console.log("我只是一个button，请注意了")

                    },
                    link: function () {
                        alert("跳转之前要过我这关，否则别想过去")
                    }
                }
            }
        )
    </script>

</div>
</body>
</html>

行为如下：
当点击链接的是，会执行我们的自己的link 方法，然后弹出一个框，确定之后再进行跳转。这就是阻止默认行为. 如果没有事件修饰符，你实现起来很麻烦 .

.capture 添加事件侦听器时使用事件捕获模式

这句话看起来比较难理解，我举个例子就行了

比如在点击button的时候，默认先会执行 button 事件，然后外层的box 事件，
如果在最外层加上了capture ，就会先执行外层的box 事件，再执行button 事件，

用.capture 跳过默认行为，优先执行。

示例代码修改的部分如下：

<div id="pp" class="box" @click.capture="big_box">
    <div class="box2"  @click="small_box">
         <input type="button" :value=value :title=title @click="button">
        <!--<a href="https://www.baidu.com"  @click="link">百度一下，你就知道</a>-->
    </div>

看看执行结果：
我是外层的
我只是一个button，请注意了
我是里层的

.self 只当事件在该元素本身触发时触发回调

.self 只要学过python 都有感觉，这个就是它自身，只有当点击它的时候才能显示，别想从冒泡
获取。

比如如果在最外层加上.self, 当点击button 的时候，最外成不会触发到，只有点击最外层才能被触发，

如果不加上.self 会被冒泡.

修改代码如下：

<div id="pp" class="box" @click.self="big_box">

当点击button 的时候最外层没有触发到.

总结： .self 和stop 有什么区别呢

stop 会把全部的冒泡干掉
.self 只是针对自身.

.once 事件只能触发一次

这个更好理解，只能触发一次，你再点击对我没有用。

修改如下：

<div id="pp" class="box" @click="big_box">
    <div class="box2"  @click="small_box">
         <input type="button" :value=value :title=title @click.once="button">
        <!--<a href="https://www.baidu.com"  @click="link">百度一下，你就知道</a>-->
    </div>
</div>

就第一次的点击button 触发了，再点击就不能生效

在这里插入图片描述