8. Vue v-on的事件修饰符

Devops海洋的渔夫

发布于 2020-03-19 17:19:21

9760

发布于 2020-03-19 17:19:21

文章被收录于专栏：Devops专栏Devops专栏

事件修饰符：

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次
事件修饰符的串联使用，例如：@click.prevent.once，只会执行一次阻止默认行为，第二次则不会阻止。另外，两个事件修饰符的先后效果一致。

下面对于每个修饰符编写逐个示例。

示例：.stop 阻止冒泡事件

编写一个按钮以及div，当按钮在div内，如果监听click事件，默认点击按钮的时候也会出发div的click事件，这种情况就是事件冒泡。

示例代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inner{
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

        <div class="inner" @click="divHandler">
            <input type="button" value="按钮" @click="btnHandler">
        </div>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods:{
                divHandler(){
                    console.log("触发div的click事件");
                },
                btnHandler(){
                    console.log("触发btn的click事件");
                }
            }

        })
    </script>

</body>
</html>

在浏览器执行如下：

那么为了阻止冒泡事件，可以使用.stop事件修饰符，如下：

再次在浏览器点击按钮，查看触发事件如下：

可以看到div的click事件没有被触发，已经阻止事件冒泡了。

示例：.prevent 阻止默认事件

编写一个a标签，绑定一个click事件，阻止a标签默认的href跳转页面的行为。

示例如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inner{
            width: 100%;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>

    <div id="app">

        <a href="https://www.baidu.com" @click="clickHandler">访问百度</a>

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

    <script>
        // 2. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {},
            methods:{
                clickHandler(){
                    console.log("触发click事件");
                },
            }

        })
    </script>

</body>
</html>

在浏览器点击a标签，则自动跳至百度页面，如下：