<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="./lib/vue-2.4.0.js"></script>

<style>

.inner {

height: 150px;

background-color: darkcyan;

}

.outer {

padding: 40px;

background-color: red;

}

</style>

</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>

05. .stop、.prevent、.capture、.self、.once、的更多相关文章

  1. 算法进阶面试题05——树形dp解决步骤、返回最大搜索二叉子树的大小、二叉树最远两节点的距离、晚会最大活跃度、手撕缓存结构LRU

    接着第四课的内容,加入部分第五课的内容,主要介绍树形dp和LRU 第一题: 给定一棵二叉树的头节点head,请返回最大搜索二叉子树的大小 二叉树的套路 统一处理逻辑:假设以每个节点为头的这棵树,他的最 ...

  2. 【MySQL】Linux下MySQL 5.5、5.6和5.7的RPM、二进制和源码安装

      [MySQL]Linux下MySQL 5.5.5.6和5.7的RPM.二进制和源码安装 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后, ...

  3. 什么是机器学习的特征工程？【数据集特征抽取（字典，文本TF-Idf）、特征预处理（标准化，归一化）、特征降维（低方差，相关系数，PCA）】

    2.特征工程 2.1 数据集 2.1.1 可用数据集 Kaggle网址:https://www.kaggle.com/datasets UCI数据集网址: http://archive.ics.uci ...

  4. CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

    CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你 ...

  5. 在线教学、视频会议 Webus Fox（1）文本、语音、视频聊天及电子白板基本用法

    Webus Fox是基于网页的在线教学.视频会议软件,不用安装,直接使用.它提供文本.语音.视频聊天,文件共享.电子白板等功能. 1. 登录 访问 http://flash.webus.cn/#,用自 ...

  6. 五大权限：UGO权限、SetUID SetGID Sticky、ACL权限、chattr（文件系统级别的权限）、SELINUX

    五大权限:UGO权限.SetUID SetGID Sticky.ACL权限.chattr(文件系统级别的权限).SELINUX   ======================文件属性以及ugo权限= ...

  7. Linux Kernel sys_call_table、Kernel Symbols Export Table Generation Principle、Difference Between System Calls Entrance In 32bit、64bit Linux

    目录 . sys_call_table:系统调用表 . 内核符号导出表:Kernel-Symbol-Table . Linux 32bit.64bit环境下系统调用入口的异同 . Linux 32bi ...

  8. java的文件流：字节流（FileInputStream、FileOutputStream）和字符流（FileReader、FileWriter）。

    java的输入输出建立在4个抽象类的基础上:InputStream.OutputStream.Reader.Writer.InputSream和OutputStream被设计成字节流类,而Reader ...

  9. VC、MFC中设置控件的背景色、标题、字体颜色、字体要注意的地方[转]

    在MFC中设置控件的背景色.字体.字体颜色.标题等属性主要是利用OnCtlColor函数来实现. 如: HBRUSH CAlarm::OnCtlColor(CDC* pDC, CWnd* pWnd, ...

  10. Android动画主要包含补间动画（Tween）View Animation、帧动画（Frame）Drawable Animation、以及属性动画Property Animation

    程序运行效果图: Android动画主要包含补间动画(Tween)View Animation.帧动画(Frame)Drawable Animation.以及属性动画Property Animatio ...

随机推荐

  1. HTML、CSS知识点,面试开发都会需要--No.4 内容布局

    No.4 内容布局 1.列举场景 同一行布局三个元素.三个元素等比显示,并且其他元素不会围绕这三个元素.如下要让下面的三个column等比显示在一行: 2.通过Float属性实现 (1)float:l ...

  2. mysql避免数据库误操作小技巧（转）

    避免混淆开发环境的DB和生产环境的DB这在小公司小团队尤其常见.一个人即负责开发,又管DB.桌面上开了一坨终端,有的是开发的DB,有的是生产的DB.一不留神,就写串了,或者粘贴串了.更郁闷的是,有时候 ...

  3. phpspider php爬虫框架

    其实我自身的不是经常写正则,而且不规则的html去写正则本身就是件很麻烦的事情,如果页面有些微变动和更新就得再次去维护正则表达式,其实是非常蛋疼的 我第一感觉就是去找一下爬虫的库,但是发现现在php爬 ...

  4. LeetCode 993 Cousins in Binary Tree 解题报告

    题目要求 In a binary tree, the root node is at depth 0, and children of each depth k node are at depth k ...

  5. 获取子字符串函数MidStr

    MidStr返回指定范围内的字符串.该函数有三个参数.第一个参数为源字符串,第二个参数为起点(下标从1开始),第三个参数为结束点.通过第二.第三个参数则可指定要复制字符串的范围. function M ...

  6. Java学习-049-正则工具类

    自去年九月份决定再次入学和职业资格进阶,开始备战二者考试至今,以及当下进行中的职称申请,犹如孤独的狼,不断前行在路上,而今凡凡总总的已历8月... 不感慨了,如下为一园友需要的正则工具类,直接上码: ...

  7. 15.2-uC/OS-III资源管理（信号量）

    1.信号量 信号量是一个“ 锁定机构”,代码需要获得钥匙才可以访问共享资源.占用该资源的任务不再使用该资源并释放资源时,其它任务才能够访问这个资源. 通常有两种类型的信号量:二值信号量和多值信号量. ...

  8. JAVA可检测异常和非检测异常

    Java的可检测异常和非检测异常泾渭分明.可检测异常经编译器验证,对于声明抛出异常的任何方法,编译器将强制执行处理或声明规则. 非检测异常不遵循处理或声明规则.在产生此类异常时,不一定非要采取任何适当 ...

  9. python练习题-day14

    一.选择题 1. python不支持的数据类型有:A. charB. intC. floatD. list ans:A 2.x = ‘foo’y = 2print(x + y) A. fooB. fo ...

  10. 点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果实现

    前面我们谈到了漂浮磁力线/鼠标吸铁石特效你也可以实现,现在来聊聊点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果的实现,这 ...