Vue事件修饰符

最新推荐文章于 2024-07-04 14:48:00 发布

北海之灵

最新推荐文章于 2024-07-04 14:48:00 发布

阅读量209

点赞数 2

分类专栏： Vue 文章标签： Vue 事件修饰符

本文链接：https://blog.csdn.net/xukongjing1/article/details/81480269

版权

Vue 专栏收录该内容

35 篇文章 19 订阅

订阅专栏

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。

.self 只当事件在该元素本身(比如不是子元素)触发是触发回调

.once 事件只触发一次

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style>
    .inner{
      background: #00bfff;
      height: 60px;
      margin:10px;
    }
    .outer{
      background: green;
      height: 100px;
      margin:10px;
    }
	</style>
	</head>
<body>
  <div id='app'>
    <!-- 使用  .stop  阻止事件冒泡-->
    <div class="outer" @click="divClick">
        <input type="button" @click.stop="btnClick" value="确认"/>
    </div>

    <!--使用  .prevent  阻止默认行为-->
    <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>

    <!-- 使用  .captrue 实现捕获触发事件的机制，-->
    <div class="outer" @click.captrue="divClick">
        <input type="button" @click.captrue="btnClick" value="点我"/>
    </div>

    <!-- 使用  .self 实现只有点击当前元素的时候，才会触发事件处理函数-->
    <div class="outer" @click.self="divClick">
        <input type="button" @click="btnClick" value="点我"/>
    </div>
    <!-- 使用  .once 只触发一次事件处理函数-->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>

    <!--  .self只会阻止自己身上的事件冒泡行为，并不会真正阻止冒泡的行为-->
    <div class="outer" @click="outerClick">
      <div class="inner" @click.self="divClick">
          <input type="button" @click="btnClick" value="点我"/>
      </div>
    </div>
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
    },
    methods:{
      divClick(){
        console.log("点击了div");
      },
      btnClick(){
        console.log("点击了按钮");
      },
      linkClick(){
        console.log("点击了百度");
      },
      outerClick(){
        console.log("点击了外层div");
      }
    }
  });
</script>
</html>

北海之灵

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue事件修饰符

.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。就是谁有该事件修饰符，就先触发谁。.self 只当事件在该元素本身(比如不是子元素)触发是触发回调.once 事件只触发一次&lt;html&gt; &lt;hea...
复制链接

扫一扫

专栏目录