vue @cliick.stop @click.prevent @click.self

(38) 2024-03-15 23:01:01

文章目录

      • @click.stop
      • @click.prevent
      • @click.self
      • @click.prevent.self 和 @click.self.prevent

@click.stop

功能:阻止子节点的冒泡。
DOM事件标准定义了两种事件流,分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点,即自上而下得去触发事件。相反的,事件冒泡是自下而上的去触发事件。
所以@click.stop的作用是阻止子节点触发事件时通知它的祖先元素。
以下例展示:

<script>
export default {
  name: "app",
  data() {
    return { }
  },
 	methods:{
     click1(){
           alert('div事件')
     },
     click2(){
          alert('div内a标签的事件')
     },
  }
}
</script>
<template>
  <button  @click="click1()" style="width:40px;height:41px">
 		<button @click.stop="click2()" style="width:20px;height:20px"></button>
	</button>
</template>

当我们点击最内部的那个button时,我们只执行了click2();如果把@click.stop删去,我们在点击最内部那个button时,还会执行click1()

@click.prevent

功能:阻止事件的默认行为。
如下例,@click.prevent阻止了链接标签默认跳转事件,而执行我们自定义的点击click()方法。

<script>
export default {
  name: "app",
  data(){},
  methods:{
    click(){
      alert('按钮被点击')
    },
  }
}
</script>
<template>
  <div id="app6">
  	<a type="button" href="http://www.baidu.com" target="_blank" 
  	@click.prevent="click()">点我</a >
	</div>
</template>

@click.self

功能:只当在 event.target 是当前元素自身时触发处理函数
简言之:加了self的点击方法只有自己可以触发,子节点点击之后无法触发;没加self的点击方法 子节点点击之后,也会因为冒泡而触发。
如下例:
由于我们加了@click.self,当我们电子最内部的div时,最外层的div的点击事件不会触发。

<script>
export default {
  name: "app",
  data(){
  },
  methods:{
    click1(){
      alert('box1被点击')
    },
    click2(){
      alert('box2被点击')
    },
  }
}
</script>
<template>
  <div @click.self="click1()" style="width:40px;height:40px;background-color:red">
    <div @click.self="click2()" style="width:20px;height:20px;background-color:pink">
    </div>
  </div>
</template>

@click.prevent.self 和 @click.self.prevent

使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的
@click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为,而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

THE END

发表回复