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>

这里就先谈这些,有些深层次的东西,待接触到再深究。

时间: 2024-10-14 15:39:43

vue 表格阻止父元素冒泡事件的相关文章

javascript阻止子元素冒泡触发父元素的mouseover、mouseout

本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对 应该是是否要运行事件函数中的相关操作... 首先你可以猛戳这里: 问题的出现 注:jquery中的mouseover/out事件也有此问题 解决方法一: 在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout. 网上很多说法,这两个事件只有ie支持,其他浏览器不支持. 但是我在最新版本的火狐与谷歌都支持了

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

3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3.简单点,直接在子元素事件function最后加return false:// 阻止事件冒泡和默认操作

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

先实例化Vue对象,再操作其他对象,Vue对象声明时会渲染html容器内的所有元素, 会导致元素事件失效或dom元素重新创建,所以涉及html元素的对象都要在实例化Vue之后执行. 下面是简要的例子,还望高手指点,目前猜测是对象赋值后,vue渲染元素将元素进行了改变导致之前的赋值对象变化了,无论是jquery对象还是dom对象都不行. <div id="vm"> {{msg}} <input type="button" value="试试

Jquery如何阻止元素冒泡同类型事件

今天遇到一个问题,组件中同元素绑定了多个相同的事件a,b,在a事件中有一个回调函数返回一个布尔类型值,如果为真则继续下去,如果假则直接return; 那么我们先来了解一下事件对象中阻止事件的几个方法: 1. event.preventDefault();  -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: <a href="http://www.baidu.com" target=&qu

html事件-子元素事件不触发父元素事件

<div class="list-row" onclick="showChatDialog('dy','100000001',true);"> <img class="icon" src="/icon/default.ico" onclick="personData(event,100000001);"> <a class="nickname">dy&

二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下图为子元素将值传递出去的方式,使用emit将值公布给父元素,见下图: 父元素需要接受子元素给的值,在父元素中相应的要有propMethods属性,这个属性可以使用v-on的方式绑定,也可以使用@propMethods的方式,见下图: 上图中的login是处理事件,这里点击按钮时需要子元素来触发事件,所以

div嵌套点击事件问题解决方法-阻止冒泡事件

<html> <body> <li onclick="javascript:alert(1);">11111 <li onclick="javascript:alert(2);">  22222 <li id="li3" onclick="javascript:alert(3);">    33333 </li> </li> </li&g

web前端入门到实战:几种HTML标签伪元素绑定事件的方式

下面整理出几种简便方式实现 click 伪元素时进行事件处理,附上例子代码. HTML结构 首先 HTML 结构是这样的 <section> <span>按钮文字</span> </section> 实现方法 第一种 通过CSS3 的pointer-events 特性来实现. CSS 代码 <style> *{margin: 0; padding:0;} section{ border: 1px solid #abc; border-radius

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器 而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元