思路如下:
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 表格阻止父元素冒泡事件的更多相关文章

  1. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

  2. js原生子级元素阻止父级元素冒泡事件

    <html> <head> <style type="text/css"> #hide{ width:75%;height:80px;backg ...

  3. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  4. jquery如何阻止子元素继承父元素的事件(又称事件冒泡)

    非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行

  5. 实例化vue之前赋值html元素导致事件失效

    先实例化Vue对象,再操作其他对象,Vue对象声明时会渲染html容器内的所有元素, 会导致元素事件失效或dom元素重新创建,所以涉及html元素的对象都要在实例化Vue之后执行. 下面是简要的例子, ...

  6. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  7. embed标签 阻止点击事件 让父元素处理点击事件

    由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a ...

  8. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  9. Javascript事件模型(二):Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

随机推荐

  1. 【week3】psp (技术随笔)

    本周psp: 随笔字数: 总计 累计代码行 (前两项为单元测试部分) 词频统计:87 四则运算:49 四人小组:39 175 随笔字数 (不包含代码字数) 词频统计:237 四则运算:125 四人小组 ...

  2. Node js MySQL简单操作

    //win7环境下node要先安装MySQL的相关组件(非安装MySQL数据库),在cmd命令行进入node项目目录后执行以下语句 //npm install mysql var mysql = re ...

  3. php裁剪图片(支持定点裁剪)

    /** * 图片裁剪函数,支持指定定点裁剪和方位裁剪两种裁剪模式 * @param <string> $src_file 原图片路径 * @param <int> $new_w ...

  4. MySQL中的条件语句

    判断学生表中成绩是否小于60,将小于60的学生成绩列为不及格 学生表(student) 字段:姓名(name),学号(主键)(num),性别(sex),成绩(score) select *,if(sc ...

  5. Activiti5工作流笔记二

    流程变量 import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import org.activiti ...

  6. [转]MATLAB cell数据类型

    细胞型数据类型(cell)使不同类型和不同维数的数组可以共存,细胞型数组实际上可以认为是一种以任意形式的数组为分量的多维数组. 1.细胞型数据的定义 1)直接赋值定义:细胞型变量在定义时需要使用大括号 ...

  7. Codeforces633H-Fibonacci-ish II

    题目 斐波那契数列\(f\),\(f\_1=f\_2=1,\ f\_n=f\_{n-1}+f\_{n-2}\ (n>2)\). 给定长度为\(n\ (n\le 30000)\)的数列\(a\), ...

  8. Luogu1155 NOIP2008双栈排序(并查集)

    两个位置i和j上的元素不能被放进同一个栈的充要条件显然是存在k使i<j<k且ak<ai<aj.由此在保证合法的情况下贪心地放就是正确的了. 至于如何判断,可以记一下后缀最小值, ...

  9. hdu 3549 Flow Problem (网络最大流)

    Flow Problem Time Limit: 5000/5000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  10. [luogu3806]【模板】点分治1

    description 求树上长度为\(k\)的路径是否存在. data range \[n\le 10000,k\le 10000000\] solution 点分治复习... 使用普通的点分治枚举 ...