Vue.js---事件冒泡和默認事件處理

時間 2019-11-13

原文原文鏈接

1、默認事件

何爲默認事件？好比 a 會跳轉頁面，submit 會提交表單等。javascript

1. 普通js方法

e.preventDefault()函數。html

<a href="http://www.baidu.com" onclick="stopDef(event)">百度</a>

function stopDef(e){
  e.preventDefault();
}

2. Vue.js方法

.prevent 是vue 的內置修飾符，調用了 event.preventDefault()阻止默認事件前端

<div id="app">
  <a href="http://www.baidu.com" @click.prevent="vueStopDef()">百度</a>
</div>

window.onload = function(){
  new Vue({
    el:"#app",
    methods:{
      vueStopDef(){
        console.log("vue.js經過 .prevent 阻止默認事件")
      }
    }
  });
}

2、冒泡事件

何爲事件冒泡？執行下段代碼：vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .div1{
      width: 500px;
      height: 500px;
      border: 1px solid black;
    }
    .div2{
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
    .div3{
      width: 300px;
      height: 300px;
      border: 1px solid black;
    }
    .div4{
      width: 200px;
      height: 200px;
      border: 1px solid black;
    }
    .div5{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  
  </style>
  <script src="../js/vue.js"></script>
  <script>
    function fun01(){
      console.log("點擊了div1");
    };
    function fun02(){
      console.log("點擊了div2");
    };
    function fun03(){
      console.log("點擊了div3");
    };
    function fun04(){
      console.log("點擊了div4");
    };
    function fun05(){
      console.log("點擊了div5");
    };

    window.onload = function (){

    }
  </script>
</head>
<body>
  <div class="div1" onclick="fun01()">
    <div class="div2" onclick="fun02()">
      <div class="div3" onclick="fun03()">
        <div class="div4" onclick="fun04()">
          <div class="div5" onclick="fun05()">
            div05
          </div>
          div04
        </div>
        div03
      </div>
      div02
    </div>
    div01
  </div>
</body>
</html>

當點擊div05時，同時按順序觸發 div0五、div0四、div0三、div0二、div01；當點擊div03的時候，同時按順序出發div0三、div0二、div01 等。從內層div一層一層觸發外層div事件，這種現象就是事件冒泡。 java

1. 普通 js 方法

e.stopPropagation()。上述代碼中，在定義fun05()改爲fun05(e)，同時在方法中加入e.stopPropagation()。在調用是 onclick=「fun05(event)」。當點擊div05時，不會冒泡觸發外層事件。app

2. vue.js方法

.stop 是vue 的內置修飾符調用了 e.stopPropagation()。阻止冒泡事件發生。下段代碼中div5和div3出發點擊事件時使用 .stop ，阻止冒泡事件發生。當點擊div05 活着div03時，不會觸發冒泡事件。函數

<div id="app" class="div1" @click="fun01">
  <div class="div2" @click="fun02">
    <div class="div3" @click.stop="fun03">
      <div class="div4" @click="fun04">
        <div class="div5" @click.stop="fun05">
          div05
        </div>
        div04
      </div>
      div03
    </div>
    div02
  </div>
  div01
</div>

window.onload = function (){
  new Vue({
    el:"#app",
    methods:{
      fun01(){
        console.log("點擊了div1");
      },
      fun02(){
        console.log("點擊了div2");
      },
      fun03(){
        console.log("點擊了div3");
      },
      fun04(){
        console.log("點擊了div4");
      },
      fun05(){
        console.log("點擊了div5");
      }
    }
  });
}

可是，仍是有點問題，上段代碼運行後，由於對div5 和div3阻止了冒泡事件。可是，當點擊div4 的時候，div4發生冒泡事件，同時出發了div3的點擊事件(後面的被div阻止了)。也就是說，即便本身自己使用.stop阻止冒泡事件(不去觸發外層事件)，可是自身仍是會被其它(內層事件)觸發。這個時候，就須要 .self。ui

.self 是vue 的內置修飾符對於所指定的元素只有當前元素自己能夠觸發事件，修飾符能夠連寫。即，將上段代碼div3綁定事件改成spa

<div class="div3" @click.stop.self="fun03">

此時，能出發 div3 的點擊事件只有在點擊div3時這一種狀況。code

至此，完畢，感謝閱讀。若是您以爲本篇博客對您有用，記得給個贊喲

一入前端深似海，今後時間是路人。

－－論前端的技術更新

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。