当前位置: 首页 > news >正文

使用checkBox组件时,动态设置disabled,仍能触发click事件的原因及解决办法

在使用vant的Checkbox组件时,为了实现复选框组选择一个,禁用掉另一个,同时添加点击事件的功能时。遇到明明disabled=true,但仍能触发点击事件的情况。为此,分析下触发点击事件的原因及解决方法。

一、原因

1、异步更新

异步更新:
Vue 在处理数据更新时可能会使用异步更新队列。
当点击复选框时,Vue 可能会首先触发 click 事件,然后在稍后的时间异步更新数据,以及复选框的 disabled 属性。这样,即使 disabled 在 click 事件触发时是 true,但实际的禁用状态可能会在稍后的异步更新中改变。
因此,虽然看起来复选框被禁用了,但在点击瞬间仍然可以触发 click 事件。

2、事件冒泡

事件冒泡:
在某些情况下,即使元素被禁用,它仍然可以触发事件。
这是因为事件处理可能发生在 DOM 层级中的某个节点上,然后通过事件冒泡传递到父元素,从而触发父元素上的事件处理程序。
这可能是导致你看到复选框仍然触发 click 事件的原因之一。

二、解决方法

1、使用 @change 事件

使用 @change 事件替代 @click 事件,因为 @change 事件通常在值发生变化后触发,而不受禁用状态的影响。

2、在点击方法内部,检查复选框的禁用状态,如果它是禁用的,则不执行进一步的操作。

methods: {clickCheckBox(event) {if (event.target.disabled) {return;}// 进一步的逻辑}
}
http://www.lryc.cn/news/106944.html

相关文章:

  • 【JavaScript】如何进行除法运算且保留小数部分不参与四舍五入【推荐库bignumber.js 】
  • 掌握Java JDK 1.8 API帮助文档中文版,事半功倍编程
  • Spring Boot的自动配置原理
  • NFS服务器
  • 说明学习委员之作业管理系统—后端部分
  • 质数(判定质数 分解质因数 筛质数)
  • SAP数据库表维护视图生成器的使用
  • 数据结构 | 递归
  • 微信发视频怎么不压缩画质?试试这几招
  • 【网络安全带你练爬虫-100练】第16练:使用session发送请求
  • 论文代码学习—HiFi-GAN(3)——模型损失函数loss解析
  • CLion中avcodec_receive_frame()问题
  • Linux安装操作(Mac版本)
  • Linux(四)--包软件管理器与Linux上软件的下载示例
  • HTML <param> 标签
  • 基于ARM+FPGA (STM32+ Cyclone 4)的滚动轴承状态监测系统
  • 二、数据结构10:堆 模板题+算法模板(堆排序,模拟堆)
  • W6100-EVB-PICO做DNS Client进行域名解析
  • 【linux-网络】4层转发方法-iptable以及nginx
  • vue复制文案,复制图片,黏贴图片
  • Web应急思路
  • shell脚本清理redis模糊匹配的多个key,并计算释放内存大小
  • python-MySQL数据库建表语句(需要连接数据库)转存为Excel文档-工作小记
  • iOS Block介绍
  • 小程序安全性加固:如何保护用户数据和防止恶意攻击
  • Ubuntu的tar命令详解
  • 使用elementplus实现文本框的粘贴复制
  • 计算机毕设 深度学习卫星遥感图像检测与识别 -opencv python 目标检测
  • devops(前端)
  • SpringBoot中MongoDB的使用