vue 表格阻止父元素冒泡事件
思路如下:
1.给复选框定义一个类型,type="selection"
2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡。
rowDetailShow(row, event, column) {
if(column.type !== 'selection') {
this.selectedItem = row
this.detailShow = true
}
this.tableIndex = row.tableId
},
这样是一种方法,因为复选框一般都是与表格同步存在的。
还有一种简单的方法,就是在@click的后面加.stop,就成了这样,@click.stop="collectStar",这个知识点关联的是,vue里面的知识,在文档中的事件修饰符一栏中,我们可以看到:
<!-- 阻止单击事件冒泡 -->
<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>
这里就先谈这些,有些深层次的东西,待接触到再深究。
vue 表格阻止父元素冒泡事件的更多相关文章
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- js原生子级元素阻止父级元素冒泡事件
<html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...
- Javascript禁止子元素继承父元素的事件
3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...
- jquery如何阻止子元素继承父元素的事件(又称事件冒泡)
非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行
- 实例化vue之前赋值html元素导致事件失效
先实例化Vue对象,再操作其他对象,Vue对象声明时会渲染html容器内的所有元素, 会导致元素事件失效或dom元素重新创建,所以涉及html元素的对象都要在实例化Vue之后执行. 下面是简要的例子, ...
- js阻止元素的默认事件与冒泡事件
嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault(); -- 阻止元素的默认 ...
- embed标签 阻止点击事件 让父元素处理点击事件
由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...
- jquery阻止元素冒泡的两种方法
通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...
- Javascript事件模型(二):Javascript事件的父元素和子元素
DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...
随机推荐
- 【Linux】- Ubuntu 配置mysql远程访问
ubuntu上安装mysql非常简单只需要几条命令就可以完成. sudo apt-get install mysql-server 安装过程中会提示设置密码什么的,注意设置了不要忘了,安装完成之后 ...
- IIS部署网部常用问题汇总
1.unrecognized attribute 'targetframework' A: 需要注册.net framework到iis.步骤如下: (1)'Start' -> 'CMD' (2 ...
- 从实战角度浅析snmp
Snmp Simple Network Management Protocol Snmp最终是为五花八门的网管软件服务的,由于接触的网管软件较少,所以对snmp的理解至今还仅限于初级配置阶段.以下言 ...
- WebService部署服务器调试时提示 “测试窗体只能用于来自本地计算机的请求”解决方法
原因:没有开启服务器访问权限! 解决方法: 在web.config的<system.web></system.web>中加入如下配置节内容即可解决 <webService ...
- js滚动大于多少菜单就开始固定
//导航置顶 $(window).scroll(function () { var pos = $(window).scrollTop(); ) { $("#menu").addC ...
- md5和base64加密解密
import java.io.IOException; import java.security.MessageDigest; import sun.misc.BASE64Encoder; impor ...
- Python 源码剖析(六)【内存管理机制】
六.内存管理机制 1.内存管理架构 2.小块空间的内存池 3.循环引用的垃圾收集 4.python中的垃圾收集 1.内存管理架构 Python内存管理机制有两套实现,由编译符号PYMALLOC_DEB ...
- Flask的第一个应用
Flask 是一个 Python 实现的 Web 开发微框架,微框架中的“微”意味着 Flask 旨在保持核心简单而易于扩展. 与Django功能上比较: Django:中间件,路由系统,视图(CBV ...
- BZOJ4514:[SDOI2016]数字配对——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4514 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj ...
- SAPI 包含sphelper.h编译错误解决方案
原文连接地址:http://blog.csdn.net/believenow_notfuture/article/details/52191229 [转]SAPI 包含sphelper.h编译错误解决 ...