zoukankan      html  css  js  c++  java
  • 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
    <div id="hdcms">
    
        <!--默认是从里向外冒泡响应事件,从子级->父级元素响应事件,-->
        <div @click="box" :style="{border:'solid 2px red'}">
            <!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
            <a href="https://www.cnblogs.com/haima" @click.prevent="links">从里向外冒泡响应事件</a>
        </div>
    
        <br>
    
        <!--capture捕获事件,从父级->子级元素响应事件,-->
        <div @click="box" :style="{border:'solid 2px red'}">
            <!--prevent是阻止点击a连接跳转,stop是阻止从里向外冒泡响应事件,父级的事件不执行-->
            <a href="https://www.cnblogs.com/haima" @click.stop.prevent="links">阻止从里向外冒泡响应事件,阻止点击a连接跳转</a>
        </div>
    
        <br>
    
        <!--self点到自己才触发事件,点谁谁响应事件-->
        <div @click.self="box" :style="{border:'solid 2px red'}">
            <!--prevent是阻止点击a连接跳转,由于父级加了self,所以就不会向上冒泡响应事件,效果同上面的stop-->
            <a href="https://www.cnblogs.com/haima" @click.prevent="links">父级加self,阻止a标签冒泡响应事件,点谁谁响应事件</a>
        </div>
    
        <br>
        <!--capture捕获事件,从父级->子级元素响应事件,-->
        <div @click.capture="box" :style="{border:'solid 2px red'}">
            <!--prevent是阻止点击a连接跳转-->
            <a href="https://www.cnblogs.com/haima" @click.prevent="links">从父级->子级元素响应事件</a>
        </div>
        
        <br>
    
        <!--once是只绑定一次跳转-->
        <div @click="box" :style="{border:'solid 2px red'}">
            <!--prevent是阻止点击a连接跳转-->
            <a href="https://www.cnblogs.com/haima" @click.once.stop.prevent="links">从父级->子级元素响应事件</a>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#hdcms',
            data: {},
            methods: {
                box(){
                    alert('div');
                },
                links(){
                    alert('www.cnblogs.com/haima');
                }
            }
        });
    </script>
    </body>
    </html>
    

    效果:

    [Haima的博客] http://www.cnblogs.com/haima/
  • 相关阅读:
    能组成多少个无重复数字且不为5的倍数的五位数有多少个?
    http与https
    观察者模式和发布/订阅模式的区别
    快速排序的最优时间复杂度是 O(nlogn)
    函数实现 composeFunctions(fn1,fn2,fn3,fn4)等价于fn4(fn3(fn2(fn1))
    vue双向绑定代码实现
    node历史版本下载
    阻止scroll冒泡
    中断或取消Promise链的可行方案
    从输入url到页面加载完成发生了什么?——前端角度
  • 原文地址:https://www.cnblogs.com/haima/p/10237806.html
Copyright © 2011-2022 走看看