vue2.0阻止事件冒泡
<!--picker弹窗-->
<transition name="fade">
<div class="picker_wrap" v-show="roomSelectShow" @click="cancelSelect">
<div class="picker_alert" @click.stop>
<div class="picker_header ofh">
<span class="fl" @click="toRoomManagement">编辑</span>
<span class="fr" @click="confirmRoom">确定</span>
</div>
<mt-picker :slots="slots" class="" @change="onValuesChange"></mt-picker>
</div>
</div>
</transition> 出现的问题:点击picker_alert元素也会触发picker_wrap绑定的click事件 解决办法:阻止事件冒泡 在picker_alert元素加上@click.stop
事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on
提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
|
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self
会阻止所有的点击,而 @click.self.prevent
只会阻止元素上的点击。
vue2.0阻止事件冒泡的更多相关文章
- as3.0中如何阻止事件冒泡
原作者:菩提树下的杨过转载出处:http://yjmyzz.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究 ...
- 阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- js阻止冒泡及jquery阻止事件冒泡示例介绍
js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...
- js区分鼠标单双击 阻止事件冒泡
function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...
- JQuery阻止事件冒泡---阻止后续代码执行
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- jQuery阻止事件冒泡的例子
下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
随机推荐
- I-think-3
一段很有哲理的话,与大家分享一下: 时光匆匆, 有些东西很重要,有些东西不重要, 有些东西已经不再重要,有些东西还是很重要. 宏观地看待人生,大学文凭只是一种达到目标的途径,而并非是唯一. 主要坚定自 ...
- ES 03 - 初探Elasticsearch的主要配置文件(以6.6.0版本为例)
目录 1 elasticsearch.yml(ES服务配置) 1.1 Cluster集群配置 1.2 Node节点配置 1.3 Paths路径配置 1.4 Memory内存配置 1.5 Network ...
- Chapter 5 Blood Type——25
"I usually am — but about what in particular this time?" “我通常都是 —— 但是这次有什么特殊的吗?” "Dit ...
- leetcode — unique-binary-search-trees
/** * Source : https://oj.leetcode.com/problems/unique-binary-search-trees/ * * * Given n, how many ...
- [四] java虚拟机JVM编译器编译代码简介 字节码指令实例 代码到底编译成了什么形式
前言简介 前文已经对虚拟机进行过了简单的介绍,并且也对class文件结构,以及字节码指令进行了详尽的说明 想要了解JVM的运行机制,以及如何优化你的代码,你还需要了解一下,java编译器到底是 ...
- python 中 *args 和 **kwargs 的区别
在 python 中,*args 和 **kwargs 都代表 1个 或 多个 参数的意思.*args 传入tuple 类型的无名参数,而 **kwargs 传入的参数是 dict 类型.下文举例说明 ...
- 基本 SQL 之增删改查(二)
上一篇文章中,我们介绍了 SQL 中最基本的 DML 语法,包括 insert 的插入数据.update 的更新数据.delete 的删除数据以及基本的查询语法,但大多比较简单不能解决我们日常项目中复 ...
- 记一个常见的ms sql server中取第N条记录的方法
前言 好好学习,天天向上. 正文 好像也是一个不难的问题,刚视频里看到的,就记一下吧. 下面是表中原始的数据结构,做了一个倒叙排序: select * from Employee order by S ...
- Mysql语句中当前时间不能直接使用C#中的Date.Now传输
MySql中处理字符串时间,会默认把第一个数字当成年份处理. 在C#服务器中,使用Date.Now.ToString()生成的字符串时间,如果不指定字符串格式,C#会按照系统语言输出不同的字符串格式, ...
- 修改tomcat的端口号
一.环境 tomcat7.0.notepad++(这个是一个文本编辑器,用记事本也可以) 二.修改方法 端口 第一步:找到tomcat7的conf目录下的 server.xml这个文件, ...