vue中事件修饰符

.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>

猜你喜欢

转载自blog.csdn.net/qq_31293575/article/details/81118883