事件修饰符：

  • .stop 阻止冒泡

  • .prevent 阻止默认事件

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

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

  • .once 事件只触发一次

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	<style>

	    .inner {

	      height: 150px;

	      background-color: darkcyan;

	    }

	    .outer {

	      padding: 40px;

	      background-color: red;

	    }

	  </style>

	  <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

	  <div id="app">

	    <!-- 使用  .stop  阻止冒泡 -->

	    <!-- <div class="inner" @click="div1Handler">

	      <input type="button" value="戳他" @click.stop="btnHandler">

	    </div> -->

	    <!-- 使用 .prevent 阻止默认行为 -->

	    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a> -->

	    <!-- 使用  .capture 实现捕获触发事件的机制 -->

	    <!-- <div class="inner" @click.capture="div1Handler">

	      <input type="button" value="戳他" @click="btnHandler">

	    </div> -->

	    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->

	    <!-- <div class="inner" @click="div1Handler">

	      <input type="button" value="戳他" @click="btnHandler">

	    </div> -->

	    <!-- 使用 .once 只触发一次事件处理函数 -->

	    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a> -->

	    <!-- 演示： .stop 和 .self 的区别 -->

	    <!-- <div class="outer" @click="div2Handler">

	      <div class="inner" @click="div1Handler">

	        <input type="button" value="戳他" @click.stop="btnHandler">

	      </div>

	    </div> -->

	    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->

	    <div class="outer" @click="div2Handler">

	      <div class="inner" @click.self="div1Handler">

	        <input type="button" value="戳他" @click="btnHandler">

	      </div>

	    </div>

	  </div>

	  <script>

	    // 创建 Vue 实例，得到 ViewModel

	    var vm = new Vue({

	      el: '#app',

	      data: {},

	      methods: {

	        div1Handler() {

	          console.log('这是触发了 inner div 的点击事件')

	        },

	        btnHandler() {

	          console.log('这是触发了 btn 按钮 的点击事件')

	        },

	        linkClick() {

	          console.log('触发了连接的点击事件')

	        },

	        div2Handler() {

	          console.log('这是触发了 outer div 的点击事件')

	        }

	      }

	    });

	  </script>

	</body>

	</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. 怎么搭建python环境？很简单，就几步的事

    现在学习python的人越来越多了,而学习python必备的就是搭建python环境,那么,到底怎么搭建python环境呢? 首先,你需要有安装包,这个去官网下载就可以了,如果不会的话,可以看文章底部 ...

  2. nmon 的下一代工具 njmon

    njmon njmon = nmon + JSON format + real-time push to a stats database + instant graphing of "al ...

  3. pomelo环境配置（windows环境）

    目录 简介 准备 安装 工程的创建 简介 1.网易开源,免费,业(diao)界(si)良(fu)心(li)呀,^.^ 2.游戏服务器框架(当然也可以用于web服务器) 3.高性能.高可伸缩.分布式,多 ...

  4. Java 多线程实现方式二：实现 Runnable 接口

    由于java是单继承,很多时候为了实现多线程 通过继承 Thread 类后,就不能再继承其他类了.为了方便可以通过实现 Runnable 接口来实现,和Tread 类似需要重写run 方法. 下面通过 ...

  5. Java 创建 Excel 数据透视表

    Excel 数据透视表具有强大的数据处理功能,能够使表格中的数据更加直观化.使用Excel 数据透视表,能方便用户快速的排序. 筛选各种数据,同时也能满足用户对不同数据汇总的需求.本文将介绍如何在Ja ...

  6. 解决Lost connection to MySQL server during query错误方法/Mysql关闭严格模式

    使用Navicat 导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server during query,字面意思就是在查询过程中丢失连接到MyS ...

  7. ThinkPHP框架初步掌握

    为了帮老师用ThinkSNS二次开发一个微博系统,专门花了几天学习ThinkPHP框架,现在将一些ThinkPHP入门知识作以记录. 首先声明: 本文不是完全教程,只是将开发中碰到的问题作以总结,如果 ...

  8. thinkphp5和nginx不得不说的故事

    由于之前学习用的都是apsche,所以对ngnix一窍不通,在这里写给正在学习的同行,希望可以帮助到你们: 如果你不会用apache部署tp5的可以查看我之前发布的文章,里面有提到 phpstudy ...

  9. （一）PL/SQL简介

    PL/SQL PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL).PL/SQL是Oracle数据库对SQL语句的扩展.在普通SQL语句的使用上增加了编 ...

  10. [Inno Setup] How to create a OuterNotebook/welcome page in the uninstaller

    By Martin Prikryl https://stackoverflow.com/questions/42625626/inno-setup-how-to-create-a-outernoteb ...