PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 02-Vue_事件修饰符

02-Vue_事件修饰符

 一纸荒凉* Armani
 一纸荒凉* Armani 原创
2021年05月05日 15:23:29 744浏览

Vue_事件修饰符

我们的事件在触发时默认是冒泡的,就是在触发内层的元素事件时,会冒泡的最外层元素的事件。有些元素还自带默认事件,例如:超链接a,表单submit等……

  1. <!-- Style Code -->
  2. <style type="text/css">
  3. .inner {
  4. background-color: green;
  5. height: 100px;
  6. padding: 10px;
  7. }
  8. .outer {
  9. height: 200px;
  10. padding: 10px;
  11. background-color: #00007f;
  12. }
  13. </style>
  14. <!-- DOM Code -->
  15. <div id="app">
  16. <div class="outer">
  17. <div class="inner">
  18. <button>点击</button>
  19. </div>
  20. </div>
  21. <a href="http://www.baidu.com">百度一下</a>
  22. <br>
  23. <a href="http://www.baidu.com">百度一下
  24. <button>BTN</button>
  25. </a>
  26. </div>
  27. <!-- Script Code -->
  28. <script>
  29. var vm = new Vue({
  30. el: '#app',
  31. data: {},
  32. methods: {
  33. inner() {
  34. console.log("inner() 被点击了");
  35. },
  36. outer() {
  37. console.log("outer() 被点击了");
  38. },
  39. btn() {
  40. console.log("btn() 被点击了");
  41. }
  42. }
  43. });
  44. </script>

传统的方式

  1. <div id="app">
  2. <div>{{num}}</div>
  3. <div v-on:click='handle0'>
  4. <button v-on:click.stop='handle1'>点击1</button>
  5. </div>
  6. <div>
  7. <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
  8. </div>
  9. </div>
  10. <script type="text/javascript">
  11. const vm = new Vue({
  12. el: '#app',
  13. data: {
  14. num: 0
  15. },
  16. methods: {
  17. handle0: function(){
  18. this.num++;
  19. },
  20. handle1: function(event){
  21. // 阻止冒泡
  22. // event.stopPropagation();
  23. },
  24. handle2: function(event){
  25. // 阻止默认行为
  26. // event.preventDefault();
  27. }
  28. }
  29. });
  30. </script>

事件修饰符:

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

stop 阻止冒泡事件修饰符

  1. <div id="app">
  2. <div class="outer" @click="outer">
  3. <div class="inner" @click="inner">
  4. <button type="button" @click.stop="btn">点击</button>
  5. </div>
  6. </div>
  7. </div>
  8. <script>
  9. const vm = new Vue({
  10. el: '#app',
  11. data: {},
  12. methods: {
  13. inner() {
  14. console.log("inner() 被点击了");
  15. },
  16. outer() {
  17. console.log("outer() 被点击了");
  18. },
  19. btn() {
  20. console.log("btn() 被点击了");
  21. }
  22. }
  23. });
  24. </script>

效果:只执行了当前(btn)元素的点击事件,stop 阻止了冒泡,所以没有冒泡给 outer 和 inner

prevent 阻止默认事件修饰符

  1. <!-- 这样点击a链接就不会跳转了 -->
  2. <a href="http://www.baidu.com" @click.prevent>百度一下</a>
  3. <a href="http://www.baidu.com" @click.prevent="btn">百度一下</a>

capture 事件捕获修饰符

  1. <div class="outer" @click.capture="outer">
  2. <div class="inner" @click.capture="inner">
  3. <button type="button" @click.capture="btn">点击</button>
  4. </div>
  5. </div>

效果:点击 btn ,依次触发:outer -> inner -> btn

self 只有点击当前元素时才会触发

  1. <div class="outer" @click="outer">
  2. <div class="inner" @click.self="inner">
  3. <button type="button" @click="btn">点击</button>
  4. </div>
  5. </div>

效果:点击 btn,事件冒泡给 outer ,直接跳过 inner,因为 inner 需要被点击自身才行

once 事件只触发一次

  1. <a href="http://www.baidu.com" @click.prevent.once="btn">百度一下</a>
上一条: 03-Vue_样式设置 下一条: 01-Vue_常用指令
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议