js中blur和click事件的冲突

Posted 2023-04-05

参考技术A

在做表单验证时我们会经常遇到blur和click冲突的情况

举个栗子：

问题：当焦点在输入框时，点击取消按钮会触发blur和click事件，导致需要点击两次取消按钮才能关闭弹窗

原因：这是因为blur事件比click事件先触发，而 javascript为单线程，同一时间只能执行处理一个事件 ，所以当blur处理程序时，导致其后续click事件并不会执行

解决方案1：如果click事件比blur事件先触发就没有问题了，所以可以给blur事件延迟触发

解决方案2：将click事件改为mousedown事件，让其优先于blur事件执行（缺点是用户体验不好，鼠标按下便触发了事件）

解决方案3：给按钮添加一个mousedown事件，在其中执行event.preventDefault()阻止浏览器默认事件，这样点击按钮时输入框就不会失去焦点了

blur和click事件冲突

一、问题描述
文本框的blur事件和div元素的click事件出现冲突。
在input的blur事件中，我们隐藏div元素。
在div的click事件中，我们清除input的内容，并隐藏自身。
当我们在input中输入内容后，点击div，希望触发div的click事件，清除input的内容，并隐藏自身。不料先触发了input的blur事件，隐藏了div元素，导致无法完成div的click事件。
二、问题分析
出现上述问题，让人不得不去探索事件执行顺序。
A、在一个input文本框中绑定如下事件，测试执行顺序

onmouseover,onmouseenter,(onmousemove)
onmousedown,onfocus,(onmousemove)
onmouseup,onclick,(onmousemove)
onkeydown,onkeypress,oninput,onkeyup,(onmousemove)
onmouseout,onmouseleave,onchange,onblur

B、在一个文本框和div标签中都绑定事件，测试执行顺序

【input】
onmouseover,onmouseenter,(onmousemove)
onmousedown,onfocus,(onmousemove)
onmouseup,onclick,(onmousemove)
onkeydown,onkeypress,oninput,onkeyup,(onmousemove)
onmouseout,onmouseleave,
【div】
onmouseover,onmouseenter,(onmousemove)
onmousedown
【input】
onchange,onblur
【div】
(onmousemove)
onmouseup,onclick,(onmousemove)
onmouseout,onmouseleave

C、mouseover和mouseenter的区别
不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。
只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

三、解决方案
1、为blur添加延迟

dom_input.addEventListener(‘blur‘,function(e){
  setTimeout(function () {
    dom_div.style.display = "none";
  }, 200);
},true);

让div延时隐藏，可以解决div无法被点击的问题。但设置多久的延时是一个难以两全的问题，时间太短不能保证click事件的100%触发，时间太长则会造成卡顿的感觉，影响用户体验。因此，设置延时并不是该问题的最佳解决方案。

2、blur事件的动态绑定

//鼠标进入div区域，取消文本框的blur事件绑定
var fn = function(e){
  dom_div.style.display = "none";
} 
dom_div.addEventListener(‘mouseenter‘,function(e){
  dom_input.removeEventListener("blur", fn, false);
},true);
//鼠标移出div区域，为文本框绑定blur事件
dom_div.addEventListener(‘mouseleave‘,function(e){
  dom_input.addEventListener("blur", fn, true);
},true);

3、mousedown代替click

dom_input.addEventListener(‘blur‘,function(e){
  dom_div.style.display = "none";
},true);

dom_div.addEventListener(‘mousedown‘,function(e){
  dom_input.value =‘‘;
  dom_div.style.display = "none";
},true);