zoukankan      html  css  js  c++  java
  • Vue之事件冒泡

    1. 原生事件冒泡

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(ev){  
                            alert(1);  
                            //ev.cancelBubble=true;  
                        },  
                        show2:function(){  
                            alert(2);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <div @click="show2()">  
                <input type="button" value="按钮" @click="show($event)">  
            </div>  
        </div>  
    </body>  
    </html>

    事件冒泡:

    从内向外扩散,点击input,会扩散到外层的div,一直向上扩散。点击完按钮,会依次执行事件show()和show2()

    结果:

    先弹出1,后弹出2

    使用原生js取消冒泡:ev.cancelBubble=true;

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(ev){  
                            alert(1);  
                            ev.cancelBubble=true;  
                        },  
                        show2:function(){  
                            alert(2);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <div @click="show2()">  
                <input type="button" value="按钮" @click="show($event)">  
            </div>  
        </div>  
    </body>  
    </html>  

    点完按钮后,只弹出1来。

    2.Vue中事件冒泡

    取消事件冒泡:使用 .stop来取消事件冒泡

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert(1);  
                        },  
                        show2:function(){  
                            alert(2);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <div @click="show2()">  
                <input type="button" value="按钮" @click.stop="show()">  
            </div>  
        </div>  
    </body>  
    </html>  
  • 相关阅读:
    java 多线程
    构造N位格雷码(递归,面向对象)
    字典树trie
    快速排序
    C++ 链表
    15-谜问题(深拷贝、LC检索、面向对象编程)
    [编程题] 扫描透镜(本题还涉及如何从字符串中提取数字)
    python爬虫提取冰与火之歌五季的种子
    带有限期和效益的单位时间的作业排序贪心算法
    0/1背包问题与动态规划
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706781.html
Copyright © 2011-2022 走看看