Javascript中点击和模糊事件顺序的详细分析

一.现象

最近在开发中遇到一个需求，具体需求如下图所示。

这是一个非常常见的需求，输入框负责在你点击回车失焦时确认输入。按钮负责清除输入，输入的绑定代码是：

input.addEventListener('blur '，function(){ console . log(' input blur ')；});input.addEventListener('keyup '，function(){ console . log(' input key up ')；});“x”绑定的代码是：

button.addEventListener('click ')，function(e){ console . log(' button click ')；});尝试执行代码，输入后按按钮取消。结果如下：

如您所见，在点击按钮之前触发的输入模糊导致取消操作实际上不起作用。

同时可以发现事件的执行顺序是(输入-模糊)-(按钮-点击)；

二、解决方案1

最简单的解决方案是将按钮时间更改为onmousedown事件，可以获得以下结果：

事件的顺序是正确的，但是这个解决方案有两个问题：

a)按下按钮后无法取消点击

b)控制是否执行模糊需要额外的代码

那么有没有进一步的解决办法呢？

三.解决方案2

将鼠标下移和模糊事件同时绑定到按钮。具体代码和执行结果如下：

button . addeventlistener(' mouse down '，函数(e){ console . log(' button mouse down ')；e . PreventDefault()；});button.addEventListener('click ')，function(e){ console . log(' button click ')；input . blur()；});

这样就克服了第一种方案的两个缺点，完美地解决了需求。

四.执行命令探析

查询w3c标准，没有找到关于模糊、鼠标下压、点击的顺序描述。根据猜测，blur需要mousedown来执行要触发的默认事件。因此，概要事件的顺序应该是鼠标向下-(其他)模糊-鼠标向上-点击

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。