vue中@click與它的事件修飾符@click.prevent、@click.capture、@click.stop、@click.self

@click.prevent ：阻止事件的默認行為

有些標簽屬性自帶了事件，但我們有時並不需要那些事件，因此就需要阻止默認事件，只執行我們綁定的事件。

<a href="http://www.baidu.com" @click.prevent="search">百度一下</a>   //阻止a標簽跳轉，僅執行函數search

<form action="/xxx" @submit.prevent="updata">
    <input type="submit" value="注冊" />        //阻止表單提交，僅執行函數updata
</form>

 

 

@click.capture：首先冒泡的定位

類似於給了事件綁定一個關鍵字，點擊該元素或該元素內的里元素，都會首先執行該元素事件，再從內向外依次冒泡。

<div @click="one">
  我是div1
  <div @click.capture="two">
    我是div2
    <div @click="three">
      我是div3
      <div @click="four">
        我是div4
      </div>
    </div>
  </div>
</div>

① 點擊div4

 

② 點擊div3 

 

 

@click.stop ：阻止事件冒泡

點擊該元素時，僅執行本身綁定事件；點擊該元素內的里元素時，執行到該元素事件為止。

<template>
  <div @click="outside">
    <el-button @click="inside">按鈕</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    outside() {
      alert("點擊div");
    },
    inside() {
      alert("點擊按鈕");
    }
  },
};
</script>

結果：先彈出“點擊按鈕”，再彈出“點擊div”

                        

 

<template>
  <div @click="outside">
    <el-button @click.stop="inside">按鈕</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    outside() {
      alert("點擊div");
    },
    inside() {
      alert("點擊按鈕");
    }
  },
};
</script>

結果：只彈出“點擊按鈕”

<div @click="one">
  我是div1
  <div @click.stop="two">
    我是div2
    <div @click="three">
      我是div3
      <div @click="four">
        我是div4
      </div>
    </div>
  </div>
</div>

點擊div4

 

 

@click.self：跳過當前元素的事件

當元素加上.self修飾符時，冒泡會自動跳過當前元素，但不影響其他元素的冒泡和捕獲（但點擊該元素時，是會觸發事件的）。

<div @click="one">
  我是div1
  <div @click.self="two">
    我是div2
    <div @click="three">
      我是div3
      <div @click="four">
        我是div4
      </div>
    </div>
  </div>
</div>

點擊div4

 

 

====================================================================================================================

 

【.stop和.self的區別】

.stop是阻止事件繼續冒泡這個行為；而.self僅僅只阻止/忽略該元素本身，不會阻止持續性的行為，也可以理解為例子中div2沒有被綁定事件！

 

【另】

修飾符是可以疊加使用的！如： @click.prevent.stop