事件修饰符：

  • .stop 阻止冒泡

  • .prevent 阻止默认事件

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

  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once 事件只触发一次

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	<style>
  7. 	    .inner {
  8. 	      height: 150px;
  9. 	      background-color: darkcyan;
  10. 	    }
  11.  
  12. 	    .outer {
  13. 	      padding: 40px;
  14. 	      background-color: red;
  15. 	    }
  16. 	  </style>
  17. 	  <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
  18. 	</head>
  19.  
  20. 	<body>
  21. 	  <div id="app">
  22.  
  23. 	    <!-- 使用  .stop  阻止冒泡 -->
  24. 	    <!-- <div class="inner" @click="div1Handler">
  25. 	      <input type="button" value="戳他" @click.stop="btnHandler">
  26. 	    </div> -->
  27.  
  28. 	    <!-- 使用 .prevent 阻止默认行为 -->
  29. 	    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->
  30.  
  31. 	    <!-- 使用  .capture 实现捕获触发事件的机制 -->
  32. 	    <!-- <div class="inner" @click.capture="div1Handler">
  33. 	      <input type="button" value="戳他" @click="btnHandler">
  34. 	    </div> -->
  35.  
  36. 	    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
  37. 	    <!-- <div class="inner" @click="div1Handler">
  38. 	      <input type="button" value="戳他" @click="btnHandler">
  39. 	    </div> -->
  40.  
  41. 	    <!-- 使用 .once 只触发一次事件处理函数 -->
  42. 	    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->
  43.  
  44. 	    <!-- 演示： .stop 和 .self 的区别 -->
  45. 	    <!-- <div class="outer" @click="div2Handler">
  46. 	      <div class="inner" @click="div1Handler">
  47. 	        <input type="button" value="戳他" @click.stop="btnHandler">
  48. 	      </div>
  49. 	    </div> -->
  50.  
  51. 	    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
  52. 	    <div class="outer" @click="div2Handler">
  53. 	      <div class="inner" @click.self="div1Handler">
  54. 	        <input type="button" value="戳他" @click="btnHandler">
  55. 	      </div>
  56. 	    </div>
  57.  
  58. 	  </div>
  59.  
  60. 	  <script>
  61. 	    // 创建 Vue 实例，得到 ViewModel
  62. 	    var vm = new Vue({
  63. 	      el: '#app',
  64. 	      data: {},
  65. 	      methods: {
  66. 	        div1Handler() {
  67. 	          console.log('这是触发了 inner div 的点击事件')
  68. 	        },
  69. 	        btnHandler() {
  70. 	          console.log('这是触发了 btn 按钮 的点击事件')
  71. 	        },
  72. 	        linkClick() {
  73. 	          console.log('触发了连接的点击事件')
  74. 	        },
  75. 	        div2Handler() {
  76. 	          console.log('这是触发了 outer div 的点击事件')
  77. 	        }
  78. 	      }
  79. 	    });
  80. 	  </script>
  81. 	</body>
  82.  
  83. 	</html>

　　

学习Vue第三节，事件修饰符stop、prevent、capture、self、once的更多相关文章

  1. vue学习(六) 事件修饰符 stop prevent capture self once

    //html <div id="app"> <div @click="divHandler" style="height:150px ...

  2. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  3. Vue学习笔记五：事件修饰符

    目录 什么是事件修饰符 没有事件修饰符的问题 HTML 运行 使用事件修饰符 .stop阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事 ...

  4. vue指令与事件修饰符

    一.条件渲染指令 vue中提供了两个指令可以用于判断是否要显示元素,分别是v-if和v-show. 实例: <!DOCTYPE html> <html lang="en&q ...

  5. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  6. 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue指令之事件修饰符

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

  8. 怎样在 Vue 中使用 事件修饰符 ?

    Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...

  9. （二）咋使用VUE中的事件修饰符

    1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添 ...

  10. 27.28. VUE学习之--事件修饰符之stop&capture&self&once实例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 条件变量 condition_variable wait_until

    wait_until(阻塞当前线程,直到条件变量被唤醒,或直到抵达指定时间点) #include <iostream> #include <atomic> #include & ...

  2. thinkphp5.0远程执行漏洞

    0x01 漏洞简介 由于ThinkPHP5 框架控制器名 没有进行足够的安全监测,导致在没有开启强制路由的情况下,可以伪装特定的请求可以直接Getshell(可以控制服务器) 0x02 环境搭建 Ph ...

  3. flex实现三列布局

    css3新引入的flex在某些情况下布局非常实用 因为它是弹性盒子所以自适应效果会很棒 不过各项布局方案还是各有优劣 <!DOCTYPE html> <html lang=" ...

  4. 【题解】LOJ2462完美的集合(树DP 魔改Lucas)

    [题解]LOJ2462完美的集合(树DP 魔改Lucas) 省选模拟考这个??????????????????? 题目大意: 有一棵树,每个点有两个属性,一个是重量\(w_i\)一个是价值\(v_i\ ...

  5. 小白们错过就没了！Python基础之注释&变量命名

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:DZQTesters PS:如有需要Python学习资料的小伙伴可以加 ...

  6. 详解 I/O流

    I/O流是用于处理设备之前信息传输的流,在我们今后的学习甚至是工作中,都是十分重要的. 在我们的日常生活中,也是很常见的,譬如:文件内容的合并.设备之键的文件传输,甚至是下载软件时的断点续传,都可以用 ...

  7. 两种异常(CPU异常、用户模拟异常)的收集

    Windows内核分析索引目录:https://www.cnblogs.com/onetrainee/p/11675224.html 两种异常(CPU异常.用户模拟异常)的收集  文章的核心:异常收集 ...

  8. Python之学会测试，让开发更加高效（一）

      前几天,听了公司某位大佬关于编程心得的体会,其中讲到了"测试驱动开发",感觉自己的测试技能薄弱,因此,写下这篇文章,希望对测试能有个入门.这段时间,笔者也体会到了测试的价值,一 ...

  9. liunx系统二进制包安装编译mysql数据库

    liunx系统二进制包安装编译mysql数据库 # 解压二进制压缩包 [root@localhost ~]# tar xf mysql-5.5.32-linux2.6-x86_64.tar.gz -C ...

  10. Linux open() 一个函数，两个函数原型

    open在手册中有两个函数原型, 如下所示: int open(const char *pathname, int flags); int open(const char *pathname, int ...