输入焦点和点击事件冲突问题的解决方法汇总

问题描述：

在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题。由于JS是单线线程，同一时间只能处理一个事件，并且blur的执行优先级高于click，所以当两者发生时，只执行了blur事件，而不会执行click事件。

一、blur和click事件简述
blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
 

看了网上的解决方案，在这里总结一下：

1、用setTimeOut，让blur事件延迟，然后click先执行。

 getBlur(){
   setTimeout(()=>{
     console.log("input失去焦点事件") //1S之后才会执行此事件
   },1000)
  }

2、将click事件改为mousedown，让其优先于blur事件执行

@click="getLocation(item)" 改为 @mousedown = "getLocation(item)"

3、如果你不需要单独对点击事件做一些逻辑处理的话，仅仅只需发生点击的效果，那么可以对其点击事件指向失去焦点。

 <input type="text" ref="input" @blur="getBlur"/>
 <div @mousedown="$refs.input.blur()" class="div-box">
    选项a
 </div>

参考网址：input中blur失去焦点事件与点击事件冲突的解决方法（vue）_jomes_wang的博客-CSDN博客

回车和失去焦点事件同时触发_年三十的博客-CSDN博客