onclick（） 和 onblur（） 排序问题

我有一个输入字段，可以打开一个自定义下拉菜单。我想要以下功能：

• 当用户单击输入字段之外的任意位置时，应删除该菜单。
• 更具体地说，如果用户单击菜单内的 div，则应删除该菜单，并应根据单击的 div 进行特殊处理。

这是我的实现：

输入字段有一个事件，每当用户单击输入字段外部时，该事件都会删除菜单（通过将菜单的父级设置为空字符串）。菜单内的 div 也具有执行特殊处理的事件。onblur()innerHTMLonclick()

问题在于，单击菜单时事件永远不会触发，因为输入字段首先触发并删除菜单，包括 s！onclick()onblur()onclick()

我通过将菜单 divs 拆分为和事件并设置鼠标向下的全局标志来解决这个问题，该标志在鼠标向上时清除，类似于此答案中建议的。因为在 之前触发，所以如果单击了其中一个菜单 div，则会设置标志，但如果屏幕上的其他地方被设置，则不会设置该标志。如果菜单被点击，我立即返回而不删除菜单，然后等待触发，此时我可以安全地删除菜单。onclick()onmousedown()onmouseup()onmousedown()onblur()onblur()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;
    ...
}