blur事件与click事件的冲突

定义：
blur事件：当元素失去焦点时发生 blur 事件
click事件：当单击元素时，发生 click 事件

在开发中会发现存在以下场景，点击当前输入框以外的其他元素。此时输入框失焦触发blur事件，同时我们点击的元素触发了click事件。这时候，你会发现blur事件是优先于click事件的。

在开发中，遇到了两次，一次是输入框blur与单选click，一次是输入框blur与下拉框click。感觉出现场景还是很高的，所以记录下。

简化例子如下：

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){//事件1
}).on('click', 'input[type=radio]', function(){//事件2
})

这时你会发现，click事件没有执行。这是因为blur事件优先于click事件
解决方法有两种：
1.使用setTimeout定时器让blur事件延时，让click事件优先处理

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){setTimeout(function(){//事件1}, 200);
}).on('click', 'input[type=radio]', function(){//事件2
})

2.将click事件改成mousedown事件，让其优先于blur事件执行。
因为执行顺序mousedown > mouseup > blur

//输入框失焦触发事件1，点击单选元素触发事件2。
$('#form_wrap').on('blur', 'input[type=text]', function(){//事件1
}).on('mousedown ', 'input[type=radio]', function(){//事件2
})

blur事件与click事件的冲突相关推荐

不同dom的blur事件和click事件发生冲突
直接上测试代码 <!DOCTYPE html> <html lang="en"> <head><title>不同dom的blur事件 ...
blur事件与click事件冲突的解决办法
问题当对节点同时添加 blur事件以及 click事件,触发 click事件的时候程序报出这样的一个错误(Chrome浏览器): Uncaught NotFoundError: Failed t ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
blur事件和ajax,js关于blur事件阻塞click事件
出现场景: 页面有一个输入框A绑定了blur事件,且这个事件里面需要用到ajax请求数据,然后有一个按钮B绑定了点击事件: 在A里面输入完信息后, 还没失去焦点的时候点击B,这个时候发现只执行了A的b ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
android 注解点击事件,android click事件注解
定义注解: package com.fyfeng.android.annotations; import java.lang.annotation.ElementType; import java.l ...
踩坑 - click事件与blur事件冲突问题 input文件上传同名文件问题
前言上周写需求遇到了一点小坑涉及到一些小细节,今天赶上没啥事总结一下分享出来. click事件与blur事件冲突问题 click事件与blur事件 blur事件: 表单事件,元素失去焦点时候触发,不 ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
前端click事件及自定义事件
响应式页面开发常见的前端响应式开发有3套相应的解决方案: bootstrap 的 columns 布局 : 2. 使用全局的rem (页面所有元素的宽高和字体都用rem等比缩放) 使用阿里的flex ...

blur事件与click事件的冲突

blur事件与click事件的冲突相关推荐

最新文章

热门文章