vue中事件修饰符

最新推荐文章于 2022-05-19 11:46:41 发布

全职计算机毕业设计

最新推荐文章于 2022-05-19 11:46:41 发布

阅读量281

点赞数

分类专栏： vue 文章标签：事件修饰符

本文链接：https://blog.csdn.net/qq_31293575/article/details/81118883

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

.stop:阻止冒泡

.prevent阻止默认事件

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

.self只当事件在该元素本身（比如不是子元素）触发是触发回调

.once事件只触发一次

正常情况：冒泡执行点击事件

.stop（阻止事件冒泡）

做一个链接

 <a href="http://www.baidu.com" @click="lianjie">点我跳转到百度</a>

lianjie是控制台打印信息

正常情况是跳转到百度

.prevent（应该是不会跳转只是打印控制台信息的，额，没有成功）

.capture是从外层到里层触发事件

.self是只触发点击元素事件

.once是只触发一次

不再实验了，具体自己操作

贴出部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间修饰符</title>
    <script src="vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app" style="width: 200px;height: 100px;background-color: black" @click="topnormal">
        <input type="button" value="点我" @click.stop="normal">
    </div>
    <a href="http://www.baidu.com" @click.prevent="lianjie">点我跳转到百度</a>
<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            msg:'啊啊啊啊啊啊啊啊------'
        },
        methods:{
            normal(){
                console.log("内层按钮事件")
            },
            topnormal(){
                console.log("外层div事件")
            },
            lianjie(){
                console.log("我是链接")
            }

        }
    })
</script>
</body>
</html>

完整原文请参考：http://blog.maptoface.com/post/88

全职计算机毕业设计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中事件修饰符

.stop:阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元素本身（比如不是子元素）触发是触发回调.once事件只触发一次正常情况：冒泡执行点击事件.stop（阻止事件冒泡）做一个链接 <a href="http://www.baidu.com" @click="lianj...
复制链接

扫一扫