【vue.js Day05】事件修饰符

最新推荐文章于 2024-08-09 09:48:25 发布

共你山今

最新推荐文章于 2024-08-09 09:48:25 发布

阅读量69

点赞数

分类专栏： # 【前端】Vue 个人知识体系文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45357284/article/details/108523224

版权

【前端】Vue 个人知识体系专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件修饰符

使用.stop阻止冒泡

<div class="inner" @click.stop="divclickHandle">
        <input type="button" value="戳他" @click.stop="btnHandler">
    </div>

使用 .prevent 阻止默认行为

<a href="www.baidu.com" @click.prevent.once="linkclick">有问题,去百度</a>

使用 .capture 实现捕获触发事件的机制

<div class="inner" @click.capture="divclickHandler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>

使用 .self 实现只有点击当前元素的时候，才会触发的事件处理函数

<div class="inner" @click.self="divclickHandler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>

使用.once 事件只触发一次

<a href="www.baidu.com" @click.prevent.once="linkclick">有问题,去百度</a>

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
</head>
<style>
    .inner{
        height: 150px;
        background-color: darkcyan;
    }
</style>
<body>
<div id="app">
    <!-- 使用.stop 阻止冒泡-->
    <!--<div class="inner" @click.stop="divclickHandle">
        <input type="button" value="戳他" @click.stop="btnHandler">
    </div>-->

     <!-- 使用.prevent 阻止默认行为-->
    <!--<a href="www.baidu.com" @click.prevent.once="linkclick">有问题,去百度</a>-->

    <!-- 使用 .capture 实现捕获触发事件的机制-->
    <!--<div class="inner" @click.capture="divclickHandler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>-->

  

    <!--使用.self 实现只有点击当前元素的时候 才会触发事件处理函数 -->
    <!--<div class="inner" @click.self="divclickHandler">
        <input type="button" value="戳他" @click="btnHandler">
    </div>-->


     <!-- 使用  .once 事件只触发一次-->
     <!--<a href="www.baidu.com" @click.prevent.once="linkclick">有问题,去百度</a>-->
    
</div>
</body>
<script src="lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            divclickHandler() {
                console.log("这是触发了 inner div 的点击事件")
            },
            btnHandler(){
                console.log("这是触发了 btn 按钮的点击事件")
            },

            linkclick(){
                console.log("这是触发a标签")
            }

        },
    })
</script>
</html>

共你山今

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【vue.js Day05】事件修饰符

事件修饰符使用.stop阻止冒泡<div class="inner" @click.stop="divclickHandle"> <input type="button" value="戳他" @click.stop="btnHandler"> </div>使用 .prevent 阻止默认行为<a href="www.baidu.com" @click.prevent.once="linkclick">有问题,去百度</
复制链接

扫一扫

专栏目录