阻止el-checkbox的@change事件冒泡

胡乱分享

已于 2023-04-13 08:48:46 修改

阅读量798

点赞数 1

文章标签： javascript vue.js elementui

于 2023-04-12 17:38:34 首次发布

本文链接：https://blog.csdn.net/weixin_46054723/article/details/130112676

版权

文章讨论了在处理组件交互时，如何利用点击事件（click.stop）来阻止事件冒泡，而不是使用@change.stop。示例中展示了在元素中，结合v-model和click.stop如何实现事件处理。

摘要由CSDN通过智能技术生成

我们可以利用点击事件来处理事件冒泡，想使用@change.stop是不可行的。

<p @click.stop>
   <el-checkbox v-model="value" @change="(e)=>handleCheckRowChange(e,item)"></el-checkbox>
</p>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

胡乱分享

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
阻止el-checkbox的@change事件冒泡

我们可以利用点击事件来处理事件冒泡，想使用@change.stop是不可行的。
复制链接

扫一扫

阻止@change事件冒泡 阻止el-checkbox冒泡

lyl_csdn_89的博客

04-16

3632

需求：el-checkbox中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的showPou方法 <li @click="showPou()"> <p> <el-checkbox @change="(val)=>handleCheckTower(val,item)" v-model="item.showCft" >测风塔</el-checkbox> </...

阻止el-checkbox内层冒泡

SL7664的博客

02-06

1145

阻止el-checkbox内层冒泡

参与评论您还未登录，请先登录后发表或查看评论

checkbox 复选框冒泡事件

最新发布

HDdgut的博客

06-22

323

解决办法：给checkbox绑定一个catchtap，指向空事件，阻止事件冒泡，如：catchtap=“checkEvent”，checkEvent定义一个空事件。3 @click.native ：绑定原生的点击事件，（vue的组件中使用原生的点击事件，需要加.native ）1 @click.stop ：阻止事件冒泡，点击该元素时，仅执行本身绑定事件，不会执行该元素的父元素的绑定事件。5 @click.capture ：事件捕获使事件触发从包含这个元素的顶层开始往下触发。

vue中div外部有点击事件，内部有change事件如何阻止内部冒泡事件

cherry_zhang18的博客

04-24

722

change阻止不了冒泡，只能使用click的$event.stopPropagation()处理。解决如上图，因为el-checkbox没有自带click，需要使用@click.native，

关于el-checkbox阻止事件冒泡的方式处理

qq_44716001的博客

05-06

301

阻止冒泡事件

yongyafang123的博客

05-15

1109

一般冒泡Vue行为即可用stop解决，如下 <div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click.stop="show()"> </div> </div> 阻止事件默认行为： <div id="box...

Element Plus阻止 el-dropdown、el-switch等冒泡事件

YUSIR 完美CODING世界

10-13

1598

问题点：组件中遇到事件冒泡问题了，el-checkbox 中 @change事件要求阻止冒泡，如下代码中要求点击checkbox时不调用li标签的show方法。在el-checkbox 中用 @change.stop 发现不起作用，报错，没有相关方法，坑死。给元素包一层父元素，父元素上使用@click.stop，阻止事件冒泡。最近做vue3项目，使用Element Plus,又遇到坑了！使用vue3的事件修饰符报错。其他el组件也一样处理。

Vue动态生成el-checkbox点击无法赋值的解决方法

10-17

在Element UI中，`el-checkbox-group`组件和它的子组件`el-checkbox`是通过`v-model`与数据进行双向绑定的。默认情况下，如果绑定的数据不存在，Vue会将其初始化为一个布尔类型（`true`或`false`）。这就解释了为...

nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选

05-12

nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开效果图主要功能：实现多选框层级嵌套当选中一个二级子菜单的时候，其对应...

checkbox点击事件修改样式

01-08

在这个例子中，我们不仅改变了`checkbox`的外观，还添加了点击事件来同步`checkbox`的选中状态和自定义样式的显示。如果需要在特定区域内应用这些变化，可以使用`activeCheckBoxBySelector()`函数，并提供一个回调...

JQuery触发radio或checkbox的change事件

10-27

在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下

vue别人封装的组件事件如何阻止冒泡，如element-ui 阻止默认组件的事件冒泡方法

qq_23064501的博客

06-17

2368

只需要在你封装的组件外侧套个div，div上写@click.stop

Element ui组件库的Table表格阻止了点击事件冒泡

gzy07011的博客

12-14

467

在表格中操作一列有删除，给删除按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时跳转到对应的动态路由地址），之后就发生了在点击删除按钮时，不仅触发删除按钮绑定的点击事件，还触发了表格当前这一行的点击事件(跳转)。事件修饰符，阻止了点击事件冒泡，这样在点击删除按钮时就不会触发行点击事件了。使用的是Element ui组件库的Table表格。方法中可以处理相应的删除逻辑。我们在删除按钮上使用了。

vue阻止事件冒泡

小白菜的博客

06-15

504

.stop @row-click.stop=“handleRowClick” <el-table:data="tableData" @row-click.stop="handleRowClick"> <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip></el-table-column> <el-table-column prop="s

禁止el-checkbox元素的点击事件

qq_36566924的博客

06-07

2060

@click=“stop($event)” 方法 stop(e){ e.stopPropagation(); }

change事件阻止事件冒泡加上stop后报错TypeError: $event.stopPropagation is not a function

m0_73146522的博客

04-28

271

change事件不要加任何修饰符，直接在外面套一层view，操作如下，即可生效。

element-plus，el-tree动态禁用复选框，自动勾选复选框

nlhhln的博客

01-18

2079

项目需求是菜单权限分配，特殊的地方在于，首页为递进关系，可以依次跳转，全国–>省级–>市级，可以选择全国/省级/市级、省级/市级、市级，但是不能跳着选。控制上的难点，在于根据勾选节点，动态控制其他节点的勾选和禁用。常规的解决办法是，遍历结构树，或者通过check事件，遍历节点，这种方法会有些麻烦。这里提供一个比较简便的方法。//这里根据每次的选中和取消选择，控制其他节点状态。//关键代码，这里返回一个函数，允许动态控制变量。这里只贴关键代码，仅供参考。

vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题

stay hungry, stay foolish

08-31

2190

新增和编辑共用一个弹窗时，每次打开新增弹窗，el-select的表单项会触发change事件的自动校验。我这里的下拉选择是支持多选的，也就是属性上有multiple。

<el-checkbox @change="checkIsAll($event,checkandAll=!checkandAll)" v-model="checkandAll"></el-checkbox>值改不了为什么

06-01

`<el-checkbox>` 组件的 `v-model` 指令绑定的是复选框的选中状态，也就是一个布尔值。而 `checkIsAll($event,checkandAll=!checkandAll)` 绑定的是复选框选中状态变化时的回调函数，其中的 `checkandAll` 变量应该是一个用于控制全选状态的变量，因此这两个变量是不同的。如果你想要通过点击复选框来改变一个变量的值，可以将 `checkandAll` 变量作为 `v-model` 的绑定值，然后在 `change` 事件触发时，通过回调函数来改变 `checkandAll` 的值。例如： ``` <el-checkbox @change="checkIsAll($event)" v-model="checkandAll"></el-checkbox> // ... data() { return { checkandAll: false } }, methods: { checkIsAll(event) { this.checkandAll = event.target.checked; } } ``` 这样，当复选框的选中状态发生变化时，`checkIsAll` 方法会将 `checkandAll` 的值更新为当前复选框的选中状态。