解决模糊与点击之间的冲突

前言：uff1a

在开发过程中，经常会遇到模糊与点击之间的冲突，本文对开发中经常遇到的下拉框问题进行了描述，并提出了两种解决方案。

一、模糊点击事件

模糊事件：当元素失去焦点时触发模糊事件；它是一个表单事件，模糊和焦点事件不会冒泡，其他形式事件可用。
单击事件：单击元素时，单击事件被触发；所有元素都有此事件，从而产生气泡。




示例1：模糊事件是一个表单事件




Document.addEventListener（模糊
console.log（我的文档模糊）；
}）；

VaR ipt = document.getelementbyid（电话）；
Ipt.addEventListener（模糊
console.log（我的输入模糊）；
}）；

结果：文档输出非形式元素
我输入的模糊



示例2：单击事件可以冒泡




Document.addEventListener（单击
console.log（我的文档单击）；
}）；

VaR ipt = document.getelementbyid（电话）；
Ipt.addEventListener（单击
console.log（我输入）；
}）；

输出结果：
我输入点击
点击我的文档




示例3：单击元素会导致前一个元素失去焦点，而模糊事件位于单击事件之前。





VaR ipt = document.getelementbyid（脚本）；
Ipt.addEventListener（模糊
console.log（我的输入模糊）；
}）；

VaR建立document.getelementbyid（-）；
Btn.addEventListener (click
console.log（我的按钮）；
}）；

输出结果：
我输入的模糊
我的按钮




两。下拉框模糊并单击事件冲突，导致无法选择正常值。

在实际开发中，我们经常会遇到一个下拉列表框，点击列表框中的其他元素，点击下拉框消失，使元素成为有效的需求，这将面临冲突的问题。






赵
钱
太阳
梅子






显示/ **：
* UL外层层的当前div自定义属性数据状态控制它是否显示
* /
（函数（$）{）
$（输入）。焦点（函数（）{）
用于焦点的输入框，显示下拉框
$（搜索列表）。Attr（数据状态
}Blur（函数（）{）
输入框丢失焦点，隐藏下拉框。
$（搜索列表）。Attr（数据状态
}）；
选择相应的选项，并分配给输入框
$（搜索列表）Click（函数（）{（）{）
console.log（执行）；
$（输入）。瓦迩（$（this））；
}）；
}（jQuery）；



要执行上面的代码，会出现问题，在下拉框中获取一个值是不正确的。



原因：因为Javaｓｃｒｉｐｔ是单线程的，它只能在同一时间执行一个事件。从上面的例子3，它是已知的，模糊之前，单击执行。在这个例子中，由于模糊处理器，相应的下拉框显示区域是隐藏的，所以其后续的点击事件不执行。上述控制台的信息将不会被输出。

解决方案1：延迟模糊事件并单击执行第一。


（函数（$）{）
$（输入）。焦点（函数（）{）
用于焦点的输入框，显示下拉框
$（搜索列表）。Attr（数据状态
}Blur（函数（）{）
setTimeout（）{（）函数（
输入框丢失焦点，隐藏下拉框。
$（搜索列表）。Attr（数据状态
}，300）；
}）；
选择相应的选项，并分配给输入框
$（搜索列表）Click（函数（）{（）{）
console.log（执行）；
$（输入）。瓦迩（$（this））；
}）；
}（jQuery）；



三。用鼠标把它优先

例4：在例3的点击鼠标事件





VaR ipt = document.getelementbyid（脚本）；
Ipt.addEventListener（模糊
console.log（我的输入模糊）；
}）；

VaR建立document.getelementbyid（-）；
Btn.addEventListener（mouseDown
console.log（我的按钮mousedown ）；
}）；

输出结果：
我的鼠标按钮
我输入的模糊




MouseDown事件：当鼠标指针移动到元素并按下鼠标按钮，鼠标按下事件发生。



MouseUp事件：当鼠标按键在元轻松的MouseUp事件发生。



小心 uff1a



（1）MouseDown事件不同于点击事件，和MouseDown事件只需要按被压制，没有松动。

（2）不同的单击事件的MouseUp事件，只需要为MouseUp事件放松按钮，当鼠标指针位于元，鼠标按钮的触发事件的松弛。



补充：MouseDown，MouseUp，点击




VaR建立document.getelementbyid（-）；
Btn.addEventListener（mouseDown
console.log（我的按钮mousedown ）；
}）；
Btn.addEventListener（单击
console.log（我的按钮）；
}）；
Btn.addEventListener（MouseUp
console.log（我的按钮mouseup ）；
}）；
输出结果：
我的鼠标按钮
我松开鼠标按钮
我的按钮




因此，执行顺序如下：

> > >点击鼠标松开鼠标



解决方案2：改变的单击事件以MouseDown为主的模糊事件的执行


（函数（$）{）
$（输入）。焦点（函数（）{）
用于焦点的输入框，显示下拉框
$（搜索列表）。Attr（数据状态
}Blur（函数（）{）
输入框丢失焦点，隐藏下拉框。
$（搜索列表）。Attr（数据状态
}）；
选择相应的选项，并分配给输入框
$（。搜索列表里）。Mousedown（function（）{（）{）
$（输入）。瓦迩（$（this））；
}）；
}（jQuery）；




谢谢你的阅读。我希望你能帮助你，谢谢你对这个站的支持。