思路如下:
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. TCP系列16—重传—6、基础快速重传(Fast Retransmit)

    一.快速重传介绍 按照TCP协议,RTO超时重传是一个非常重要的事件,当RTO超时的时候,TCP会同时通过两种方式非常谨慎的降低发送数据包的速率,一种是基于拥塞控制削减发送窗口的大小,另外一个是通过指 ...

  2. PHP中如何使用Redis接管文件存储Session详解

    https://www.jb51.net/article/151580.htm 前言 php默认使用文件存储session,如果并发量大,效率会非常低.而redis对高并发的支持非常好,可以利用red ...

  3. 网络编程--System.Net

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. MongoDB、ElasticSearch、Redis、HBase这四种热门数据库的优缺点及应用场景

    MongoDB MongoDB是当今最火爆的NoSQL数据库.MongoDB最早在09年发布,算得上是早期大数据时代的数据库代表作了.随着MongoDB的火爆,研发MongoDB的团队还专门成立了Mo ...

  5. perf record -c

    如果perf record -c -c后面接的是sample_period,也就是说你让这个事件没 我的loop进程一直在执行,我的CPU的频率是2.6G hz,也就是说每一秒会有2,600,000, ...

  6. TScreen 类

    TScreen表示应用程序运行时屏幕的状态. 类关系 TObject->TPersistent->TComponent TScreen引进具有表示下列各种情况的属性 什么窗体和数据模块已经 ...

  7. JS作用域-面向对象

    1. 其它语言是以代码块作为作用域的.下面程序会报错(如C,C++中),因为局部变量name只在{   }代码块中生效.打印console.writeline(name)中的name时就会报错. pu ...

  8. HDU - 6333 Harvest of Apples

    题意: T次询问,每次给出n,m.求sigma(k:0->m)C(n, k). 题解: 用离线莫队来做. 令S(n,m) = sigma(k:0->m)C(n, k). S(n+1, m) ...

  9. PCA误差

    我们知道,PCA是用于对数据做降维的,我们一般用PCA把m维的数据降到k维(k < m). 那么问题来了,k取值多少才合适呢? PCA误差 PCA的原理是,为了将数据从n维降低到k维,需要找到k ...

  10. BZOJ2816:[ZJOI2012]网络——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=2816 https://www.luogu.org/problemnew/show/P2173 有一 ...