事件修饰符

最新推荐文章于 2024-06-04 10:37:05 发布

小石呀呀

最新推荐文章于 2024-06-04 10:37:05 发布

阅读量2.4k

点赞数 5

分类专栏： Vue

本文链接：https://blog.csdn.net/Yi_LittleRock/article/details/115738749

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的事件修饰符，包括.stop用于阻止冒泡、.prevent阻止默认事件、.capture事件捕获、.self只在元素本身触发时响应、.once事件只触发一次。通过实例展示了这些修饰符在实际应用中的效果，帮助理解如何更好地控制DOM事件。

摘要由CSDN通过智能技术生成

事件修饰符
顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

事件修饰符有：

.stop	阻止冒泡
.prevent	阻止默认事件
.capture	添加事件侦听器时使用事件捕获模式
.self	只当事件在该元素本身(不是子元素)触发时回调
.once	事件只触发一次

1.阻止冒泡

<div id="app" @click=clickDiv()>
   <button @click="clickButton()">点击</button>
</div>
<script>
   var vm=new Vue({
      el:"app",
      data:{},
      methods:{
         clickDiv(){
            console.log("点击了div")
         },
         clickButton(){
         console.log("点击了button")
         }
      }
   })
</script>

当点击按钮的时候，浏览器控制台除了会输出“点击了button”还会输出“点击了div”，这是因为button按钮是div里的元素节点，当你点击button的时候，事件会向上冒泡，触发包含它的父元素所定义的事件，这就是冒泡事件。
如果想阻止冒泡事件就需用到“.stop”修饰符。

<button @click.stop="clickButton"></button>

2.阻止默认事件
什么是默认事件？如：点击a链接自动进行跳转、点击submit按钮自动提交表单等。
这里以a链接为例：

<body>
   <div id="app">
      <a href="https://www.baidu.com" @click.prevent="linkclick()">有问题，问百度</a>
   </div>
   <script>
      new Vue({
         el:"app",
         data：{},
         methods:{
            linkclick(){
               console.log("点击了a链接")
            }
         }
      })
   </script>
</body>

加上.prevent修饰符后，a链接不能进行跳转，但是仍然可以触发click事件。

3.事件捕获
还记得冒泡事件中触发的顺序吗？即：先触发button按钮的点击事件，然后再触发button父元素div的点击事件；如果我想点击button之后先触发父元素div的点击事件，然后再触发子元素button的点击事件呢？

<div id="app" @click.capture="clickDiv">
   <button @click="clickButton"点击></button>
</div>

即：在事件触发中进行捕获，优先执行含有".caputre"修饰符的事件。

4.只当事件在该元素本身触发时触发回调

<div id="app" @click.self="clickDiv">
   <button @click="clickButton">点击</button>
</div>

我们在父元素div里加了".self"，这样父元素的点击事件只有在点击自身元素的情况下才可以触发，点击其他任何元素（如子元素button）都不会触发包含修饰符".self"的元素事件。

5.事件只触发一次

<body>
   <div id="app">
      <a href="https://www.baidu.com" @click.prevent.once="clicklink">有问题，问百度</a>
   </div>
   <script>
      el:"#app",
      data:{},
      methods:{
         clicklink(){
         console.log("点击了a链接")
         }
      }
   </script>
</body>

这里a链接点击事件使用了两个事件修饰符，说明事件修饰符可以并列使用。
这里的修饰符".once"的作用是让默认阻止行为(.prevent)只生效一次，所以当我们第一次点击a链接的时候，浏览器控制台会输出"点击了a链接",但是页面不会跳转，当我们再次点击a链接的时候页面会跳转到百度页面，这就是".once"修饰符的作用。
“.prevent"和”.once"的位置调换后，即：@click.once.prevent=“clicklink()”，执行的结果是不一样的。

小石呀呀

关注

5
点赞
踩
1

收藏

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

事件修饰符顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。事件修饰符有：.stop阻止冒泡.prevent阻止默认事件.capture添加事件侦听器时使用事件捕获模式.self只当事件在该元素本身(不是子元素)触发时回调.once事件只触发一次1.阻止冒泡...
复制链接

扫一扫