【Js】输入框blur与按钮click冲突问题

目标：实现以下功能

实现代码：输入框使用blur事件，删除使用click事件。

出现问题：点击删除，会先执行blur事件，不执行click事件。

解决方法：将删除功能的click事件，替换为mousedown事件，问题解决。

---

blur事件：当元素失去焦点时触发blur事件；其为表单事件，blur和focus事件不会冒泡，其他表单事件都可以。
click事件：当点击元素时触发click事件；所有元素都有此事件，会产生冒泡。
mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。
mouseup事件：当在元素上放松鼠标按钮时，会发生mouseup事件。

mousedown  >>  focus  >> blur   >>  mouseup  >>  click 

由于JavaScript为单线程，同一时间只能执行处理一个事件。而blur事件优先于click事件，导致其后续click事件并不会执行。

解决方案1：对blur事件进行延迟setTimeout()，让click先执行。

解决方案2：将click事件改为mousedown，让其优先于blur事件执行。

---

event.stopPropagation(); //阻止事件冒泡

event.preventDefault(); //阻止事件的默认行为

---

参考链接：快速解决js开发下拉框中blur与click冲突_javascript技巧_脚本之家