Vue2學習筆記:事件對象、事件冒泡、默認行為

本文轉載自查看原文 2017-02-21 10:34 31625 Javascript

1.事情對象

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                methods:{
                    show:function(event){
                        console.log(event);   //event   這個就是事件對象了
                    }
                }
            });
        }
    </script>
</head>
<body>
   <div id="box">
        <input type="button" value="按鈕" @click="show($event)"> 
    </div>
</body>
</html>

通過show($event)把事件對象傳到方法里

2.事件冒泡

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <div @click="show1()">
            <input type="button" value="按鈕" @click="show()"> 
        </div>
    </div>
</body>
</html>

點擊按鈕的話他會，執行show ,show1方法，依次彈出1，2。

怎么來阻止

<1> 利用我們上面講過的event對象: event.cancelBubble = true; //這種就阻止了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                methods:{
                    show:function(event){
                        alert(1);
                        event.cancelBubble = true;
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
   <div id="box">
        <div @click="show1()">
            <input type="button" value="按鈕" @click="show($event)"> 
        </div>
    </div>
</body>
</html>

<2>利用vue的方法阻止冒泡：給HTML元素綁定click事件的時候，改為@click.stop="show()"

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                methods:{
                    show:function(event){
                        alert(1);
                        //event.cancelBubble = true;
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <div @click="show1()">
            <input type="button" value="按鈕" @click.stop="show()"> 
        </div>
    </div>
</body>
</html>

3.默認行為

比如contextmenu右鍵菜單

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <!-- // <script src="vue.js"></script> -->
    <script src="http://unpkg.com/vue/dist/vue.js"></script>

    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show1:function(){
                        alert(2);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="按鈕" @contextmenu="show()"> 
        <input type="button" value="按鈕1" @contextmenu.prevent="show1()"> 

        <p>//按鈕右擊點下去會依次出現 彈窗 1， 還有右擊的默認菜單</p>
        <p>//按鈕1右擊只出現 彈窗 2</p>
    </div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 事件冒泡與默認行為 vue 事件修飾符（阻止默認行為和事件冒泡） vue 中阻止事件冒泡，捕獲，默認行為事件如何阻止事件冒泡和默認行為？ HTML DOM-->事件對象(阻止冒泡、阻止默認行為) 阻止事件冒泡和阻止事件默認行為帶你學習JQuery：事件冒泡和阻止默認行為 Vue2學習筆記:鍵盤事件 js事件冒泡、阻止事件冒泡以及阻止默認行為 javascript如何阻止事件冒泡和默認行為