1. 程式人生 > >Vue之事件冒泡

Vue之事件冒泡

htm 執行 src -s ble input spa 按鈕 width

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>  

Vue之事件冒泡