2019-10-26发表2019-10-26更新前端1 分钟读完 (大约203个字)

事件修饰符

.stop : 阻止冒泡
.prevent : 阻止默认事件
.capture : 添加事件侦听器时使用事件捕获模式 => 即从外到里触发事件
.self : 只有事件在该元素本身(比如不是子元素)触发时回调 => 只有点击当前元素时才会触发函数,而不是通过冒泡
.once : 事件只触发一次 => 事件修饰符只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理界面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue">
    <div @click="clickDiv">
        <!--
        在 @click 后面加上 .stop ,表示阻止事件冒泡
        如果不加的话,就会同时触发两个事件
        -->
        <input type="button" @click.stop="clickBtn" value="提交">
    </div>
    <!--
    在 @click 后加上 .prevent ,表示阻止默认行为,即打开链接这个默认行为
    -->
    <a href="https://www.baidu.com" target="_blank" @click.prevent="linkToBaidu">百度一下</a>
</div>

<script>
    const vm = new Vue({
        el: "#vue",
        data: {
            msg: "提交"
        },
        methods: {
            clickDiv: function () {
                console.log("点击了 div")
            },
            clickBtn() {
                console.log("点击了按钮");
            },
            linkToBaidu: function () {
                console.log("去百度")
            }
        }
    });
</script>
</body>
</html>

#前端 Vue

支付宝

微信

事件修饰符

喜欢这篇文章？打赏一下作者吧

评论

最新文章

标签

分类

Your browser is out-of-date!