vue项目中blur和click事件冲突

blur和click事件blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。因为JS是单线程，同一时间只能处理一个事件，且blur执行顺序优先click。介于此我用了简单粗暴的方法，将click事件换成了mousedown事件其实还有其他方法，这篇博文里讲

伍什kay

3671人浏览 · 2021-02-04 16:53:47

伍什kay · 2021-02-04 16:53:47 发布

blur和click事件

blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
因为JS是单线程，同一时间只能处理一个事件，且blur执行顺序优先click。

介于此我用了简单粗暴的方法，将click事件换成了mousedown事件
在这里插入图片描述

其实还有其他方法，这篇博文里讲述的比较详细些【解决blur与click冲突】

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^