Vue 阻止事件冒泡

阿新 • • 發佈：2019-01-12

轉載自 Vue2學習筆記:事件物件、事件冒泡、預設行為

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>

js、react、vue阻止事件冒泡

vue阻止冒泡： <div @click.stop='demoFun'></div> react阻止冒泡：（懶得寫了，直接上其他人的） jquery阻止冒泡 $("#demo").click(function(event){

Vue 阻止事件冒泡

轉載自 Vue2學習筆記:事件物件、事件冒泡、預設行為1.事情物件<!DOCTYPE html> <html> <head> <title></title> <meta charset="ut

Vue如何阻止事件冒泡

如何解決 vue裡面的冒泡事件方案如下：  <a v-on:click.stop="doThis"></a> &

Vue中的event阻止事件冒泡、預設事件

vue的事件物件： @dragstart=’drag(event)′，在函式中傳evevt ，函式中接收一下，事件物件就有了。 <div class="select-item" draggable='true' @dragstart='drag($event)' v

vue.js阻止事件冒泡和預設事件

首先我們來看原生JS取消事件冒泡方法： e.stopPropagation(); //非IE瀏覽器 window.event.cancelBubble = true; //IE瀏覽器原生

阻止事件冒泡

itl opp elf prop logs script rand col 事件冒泡 <!doctype html> <html> <head> <title></title> <meta

JQuery中阻止事件冒泡方式及其區別

use urn query class span 事件冒泡事件 clas nbsp 方式一：event.stopPropagation(); 1 $("#div1").mousedown(function(event){ 2 event.stopPropa

阻止事件冒泡傳播，點擊包含點擊

cti 包含 opp oca ppr || cat window tin function stopBubbling(e) { e = window.event || e; if (e.stopPropagatio

js阻止事件冒泡的兩種方法

type print mil opp name sel code read lib 一、冒泡事件簡介當我們點擊一個控件的時候，如果包括這個控件的父控件也有click事件，則會繼續執行。方法一：event.stopPropagation( ); 例如： <div

阻止事件冒泡和事件默認行為

pre function 防止處理 true 停止 jquery 事件 val 阻止事件冒泡（兼容IE8） function stopHandler(event){ window.event?window.event.cancelBubble=true:even

javascript阻止事件冒泡和瀏覽器的默認行為

pre stop key else can put 事件冒泡 prop top 1.阻止事件冒泡,使成為捕獲型事件觸發機制. 1 function stopBubble(e) { 2 //如果提供了事件對象，則這是一個非IE瀏覽器 3 if ( e &&

Vue之事件冒泡

htm 執行 src -s ble input spa 按鈕 width 1. 原生事件冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

jq+mui 阻止事件冒泡

ble span link cti sca con styles body blog 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF

javascript如何阻止事件冒泡和默認行為

demo log 執行順序 ng- 16px capital win 秘密 mir 阻止冒泡：冒泡簡單的舉例來說，兒子知道了一個秘密消息，它告訴了爸爸，爸爸知道了又告訴了爺爺，一級級傳遞從而以引起事件的混亂，而阻止冒泡就是不讓兒子告訴爸爸，爸爸自然不會告訴爺爺。下面的

阻止事件冒泡和默認到事件對象在不同瀏覽器中的傳遞

內部 eth default pre 興趣 class UNC div alert 今天群裏有一個同學發了一個問題，問題起因是他定義了一個drag函數，然後函數內部使用了e進行組織默認實踐，結果在360瀏覽器正常運行但是火狐卻報錯，e不存在，第一時間有點懵，組織冒泡和組織默

阻止事件冒泡，取消瀏覽器默認行文

需要 return listener list eve 默認值 listen t對象 turn * 阻止事件冒泡的方法 * 1、on添加的事件 * 在函數中將event對象身上的cancelBubble的值設為true * 他有一個默認值為fa

阻止事件冒泡以及stopPropagation()，preventDefault()和return false;的區別

efault 阻止事件冒泡 gif prev app opp lib body back e.preventDefault()是阻止默認事件的方法； e.stopPropagation()是阻止事件冒泡； return false;是既阻止事件冒泡又阻止默認事件；以下是個

阻止事件冒泡，阻止默認事件

opp eight inter class AD 也會 rap str -m 今天來看看前端的冒泡和事件默認事件如何處理 1.event.stopPropagation()方法這是阻止事件的冒泡方法，不讓事件向documen上蔓延，但是默認事件任然會執行，當你掉用這個

vue阻止事件

vue1.事情對象<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="

阻止事件冒泡，阻止默認事件，event.stopPropagation()和event.preventDefault()，return false的區別

attr htm pre 點擊操作連接 com spa ati 1.event.stopPropagation()方法這是阻止事件的冒泡方法，不讓事件向documen上蔓延，但是默認事件任然會執行，當你掉用這個方法的時候，如果點擊一個連接，這個連接仍然會被打開， 2.

Vue 阻止事件冒泡

相關推薦