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