事件修饰符

最新推荐文章于 2022-08-28 19:25:38 发布

gunsmoke

最新推荐文章于 2022-08-28 19:25:38 发布

阅读量115

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/gunsmoke/article/details/106082434

版权

vue学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="main">
        <!--这里用<ul @click.self="ulClick()">也可以防止冒泡,表示只有自己点击的才响应,不接受子节点冒泡的事件-->
        <ul @click="ulClick()">
            <!--传统方法阻止冒泡,注意这里获取事件对象要用$event,这是固定写法-->
            <li @click="liClick1($event)">1111111111111111</li>
            <!--用stop修饰符阻止冒泡-->
            <li @click.stop="liClick2()">2222222222222222</li>
            <!--once修饰符表示只响应一次，第二次点击就无效了-->
            <li @click.once="liClick2()">3333333333333333</li>
        </ul>
        <!--用prevent修饰符阻止默认行为,这样点击后就不能跳转了-->
        <a href="http://www.baidu.com" @click.prevent="aClick()">www.baidu.com</a>
    </div>

    <script>
        new Vue({
            el: '#main',
            data: {

            },
            methods: {
                ulClick() {
                    alert('ul click!')
                },
                liClick1(event) {
                    alert('li1 click!');
                    event.stopPropagation();
                },
                liClick2() {
                    alert('li2 click!');
                },
                aClick() {
                    alert('a click!');
                }
            }
        })
    </script>

</body>
</html>

gunsmoke

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src="../vue.js"></script></head><body> <div id="main"> <!--这里用<ul @c
复制链接

扫一扫

专栏目录