事件修饰符

环游一周

已于 2022-11-26 09:51:27 修改

阅读量563

点赞数 2

文章标签：前端 javascript 开发语言

于 2022-11-26 09:13:44 首次发布

本文链接：https://blog.csdn.net/hyk495495/article/details/128047593

版权

标准的DOM事件对象中包括了preventDefault（）、stopPropagation（）等方法，用于取消事件的默认行为或阻止事件的传播（继续冒泡）等。此外，像jQuery中那样在事件处理程序中调用event参数的preventDefault（）或stopPropagation（）方法也是可以的，但Vue.js提供了更好的处理方式。

事件修饰符
“事件修饰符”是用来修饰事件的。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.事件捕获

.capture事件修饰符的作用是改变事件流的默认处理方式，从默认的冒泡方式改为捕获方式。如下代码在外层div的事件绑定代码中添加了.capture事件修饰符。

<div id="app">
  <div id="outer" v-on:click.capture="show('外层div被单击');">
    <div id="inner"v-on:click="show('内层div被单击');"></div>
  </div>
</div>

当没有.capture事件修饰符的时候，如果单击内层div，就会先弹出一个提示框，显示“内层div被单击”，之后再弹出另一个提示框，显示“外层div被单击”。也就是说，默认情况下，先触发内层元素的事件，并且冒泡后才触发外层元素的事件。

而在添加.capture事件修饰符以后，就会交换顺序，先显示“外层div被单击“，再显示”内层div被单击“这是因为.capture事件修饰符将事件流的处理顺序改成了捕获方式，即从外向依次触发事件。

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()”，执行的结果是不一样的。