onclick()和onblur()排序问题
我有一个输入字段,显示了一个自定义下拉菜单。我想要以下功能: 当用户单击输入字段之外的任何位置时,应删除菜单。 更具体地说,如果用户单击菜单内的div,则应删除菜单,并应根据单击的div进行特殊处理。 这是我的实现: 输入字段具有一个onblur()事件,innerHTML只要用户在输入字段之外单击,便会删除菜单(通过将其父菜单设置为空字符串)。菜单内的div也具有onclick()执行特殊处理的事件。 问题在于,onclick()单击菜单时事件永远不会触发,因为输入字段onblur()会首先触发并删除菜单,包括onclick()s! 我通过将菜单div onclick()划分为onmousedown()和onmouseup()事件并在鼠标按下时设置了全局标记(在鼠标按下时清除)来解决了该问题,类似于此答案中的建议。因为onmousedown()在之前触发onblur(),所以onblur()如果单击菜单div之一将在该标志中设置,但是如果单击屏幕上的其他位置则不会设置该标志。如果单击onblur()了菜单,那么我将立即返回而不删除菜单,然后等待onclick()触发,此时我可以安全地删除菜单了。 有没有更优雅的解决方案? 代码看起来像这样: <div class="menu" onmousedown="setFlag()" onmouseup="doProcessing()">...</div> <input id="input" onblur="removeMenu()" ... /> var mouseflag; function setFlag() { mouseflag = true; } function removeMenu() { if (!mouseflag) { document.getElementById('menu').innerHTML = ''; } } function doProcessing(id, name) { mouseflag = false; ... }