el-checkbox与当前div点击事件重复

最新推荐文章于 2024-09-01 17:22:46 发布
最新推荐文章于 2024-09-01 17:22:46 发布
阅读量193 收藏 4
点赞数 4
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_darling_/article/details/140521953
版权

需求：点击当前行，勾选/取消勾选el-checkbox

bug：本来实现很简单，给当前div绑定个点击事件就行了，但发现这样点击el-checkbox时候有bug，不会勾选成功了！！

找了半天，参考了各种链接，更换checkbox的绑定属性，都不管用

el-checkbox的 v-modle、value、checked控制其选中状态区别_el-checkbox选中事件-CSDN博客

后来还是采取了给当前div绑定事件里面获取当前target的tagName，判断如果是点击checkbox就不调用当前行事件了！

代码如下：

 <el-checkbox v-model="checked" @change="handleCheck" />

当前行点击事件：

const handleMemberInfo = (e) => {   

         if (e.target.tagName === 'SPAN') return
            handleCheck(!checked.value)

}

参考链接：el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法_el-option 嵌套单选框 点击触发两次-CSDN博客

my_darling_
关注
【使用elementui中的checkBox复选框组件时，绑定click事件会触发两次（已解决）】
qq_30312887的博客
06-05 2582
使用elementui中的checkBox复选框组件时，绑定click事件会触发两次。点击取消会再弹出一次。
div中包含checkbox 点击事件重复问题
sinat_36500530的博客
10-07 289
div中包含checkbox 点击事件重复问题 解决方法 ：根据判断组件属性执行。
el-checkbox内置的change事件不生效
最新发布
weixin_75207853的博客
09-01 430
也就是 :modelValue 和 @update:modelValue，所以在这个子组件中，可以根据父组件传过来的值再搞一个计算属性value，这个计算属性的getter返回modelValue接收的值，setter进行emit传递update:modelValue和值。3. 子组件里面的el-checkbox绑定数据value，如果value的值改变了，就会触发update:modelValue到这里就是实现了el-checkbox改变了value的值也会间接改变父组件传过来的值。
element-el-checkbox相关问题。
m0_49123579的博客
08-19 3469
（1.）复选框回显问题，分单个和数组。 （2.）全选问题，第一次点击不生效。 （3.）以及取消被选中的框时，不生效， （4.）以及添加change 问题时
【Element】在table中使用el-checkbox单击事件会触发两次
小丶kiss的博客
05-23 3209
问题描述 在element的table中 使用checkbox 的单击事件,会导致checkbox的单击事件触发两次 <div class="companyList"> <el-table ref="multipleTable" :data="companyList" tooltip-effect="dark" @cell-click="edit" >
关于element el-checkbox组件click事件的一些想法
lsf1192354203的博客
02-15 4908
el-checkbox事件及处理函数
element ui中el-radio和el-checkbox点击触发两次事件处理方法
此人很懒，什么都没有写
07-07 6500
参考：https://blog.csdn.net/ChengShengMeJia/article/details/108147612 找了半天原因，后来发现是el-radio被封装多层，根元素不是input， 我认为是由于事件冒泡机制导致的，因为根元素是label，click事件绑定到了label上。 因为点击label的时候，事件冒泡一次，同时会触发关联的input的change事件，导致事再次触发事件。 解决方案 <el-radio-group v-model="radio" @click.n
element el-radio 点击触发两次问题
weixin_34403976的博客
11-18 617
解决: // html <el-radio-group v-model="radio" @click.native="click"> <el-radio :label="1" >备选项</el-radio> <el-radio :label="2">备选项</el-radio> </el-radio-group> // js click(ev){ if (ev.target.tagName === "INPUT
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
当一级菜单发生点击事件时，若原本为选中状态，则取消选中，若该菜单下有二级子菜单，所有子菜单也取消选中状态；若原本为未选中状态，则改为选中状态，若该菜单下有二级子菜单，所有子菜单也改为选中状态。 实现已...
checkbox点击事件修改样式
01-08
本文将详细介绍如何使用JavaScript（特别是jQuery库）和CSS来修改`checkbox`的点击事件以及样式，使其在用户点击时呈现出个性化的视觉效果。 首先，原生的`checkbox`样式可能不符合某些设计需求，因此需要自定义...
el-checkbox-group JSON对象的全选功能(解决el-checkbox-group不支持JSON对象的问题)
weixin_44642410的博客
06-03 874
<template> <div> <el-checkbox v-model="checkedAllTop" @change="handleCheckAllChange1($event)" class="largeCheckAll">大全选</el-checkbox> <div v-for="(item,index) in tableData" :key="item.id"> <el-checkbox v-mode.
ElementUI el-checkbox 点击Label不取消复选框的选中状态
彼岸舞的博客
06-16 1532
在点击label的时候不取消复选框的状态 实现 将change事件改为click事件 <div class="grid-content bg-purple"> <div class="grid-content bg-purple"> <el-checkbo...
Vue+Openlayers+el-checkbox-group实现多选图层的显示与隐藏
BADAO_LIUMANG_QIZHI的博客
04-01 2001
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏： Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_霸道流氓气质的博客-CSDN博客 上面通过el-checkbox以及图层点的setVisble属性为true或者false来实现图层的显示与隐藏。 也可以使用el-checkbox-group，代码逻辑使用switch判断的方式决定隐藏和显示。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,Spr.
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
热门推荐
草巾冒小子的博客
03-02 3万+
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
el-table 个体行绑定点击事件时 表格中有el-radio和el-checkbox 点击触发两次事件处理方法
weixin_45859470的博客
01-09 2793
在element的table中 使用radio或者checkbox 的单击事件,会导致radio或者checkbox的单击事件触发两次。
checkbox 复选框 冒泡事件
HDdgut的博客
06-22 423
解决办法：给checkbox绑定一个catchtap，指向空事件，阻止事件冒泡，如：catchtap=“checkEvent”，checkEvent定义一个空事件。3 @click.native ：绑定原生的点击事件 ，（vue的组件中使用原生的点击事件，需要加.native ）1 @click.stop ：阻止事件冒泡，点击该元素时，仅执行本身绑定事件，不会执行该元素的父元素的绑定事件。5 @click.capture ：事件捕获 使事件触发从包含这个元素的顶层开始往下触发。
el-checkbox的change事件
nineteenthdog的博客
06-17 2万+
<template> <div> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
checkbox点击内容不触发选中事件，子元素与父元素点击事件冲突
xuelong的博客
01-25 945
登录界面的是否通用隐私与协议，点击是checkbox进行勾选，但点击隐私时应该跳转界面，不触发勾选，这时子元素与父元素点击事件冲突。
element el-checkbox多选框change事件
zhl_cafe的博客
04-02 2366
问题：el-checkbox，change的传参问题，与更改事件 <el-checkbox v-for="(item, i) in nameList" :key="item.num" :class="[ { noCheckedClass: selectArr.includes(item.name)
el-checkbox 点击事件
09-15
el-checkbox 是一个基于 Element UI 的复选框组件。它可以通过设置 @change 事件来监听复选框的点击事件。 代码示例： ```html <template> <div> <el-checkbox v-model="isChecked" @change="handleCheckboxChange">选择</el-checkbox> </div> </template> <script> export default { data() { return { isChecked: false } }, methods: { handleCheckboxChange(val) { // 复选框状态改变时触发的事件 console.log('复选框状态改变：', val) } } } </script> ``` 在上面的示例中，我们使用 v-model 指令来绑定复选框的选中状态到 `isChecked` 变量上，然后通过 @change 事件监听复选框的点击事件，在 `handleCheckboxChange` 方法中会打印出复选框状态的改变。 当复选框被点击时，`handleCheckboxChange` 方法会被调用，并且会传入一个参数 `val`，该参数表示复选框的新状态。你可以根据这个参数做进一步的处理。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值