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;
    ...
}

我遇到了与您完全相同的问题，我的UI的设计完全符合您的描述。我通过简单地用替换onClick菜单项的解决了这个问题onMouseDown。我什么也没做；不onMouseUp，没有标志。通过让浏览器根据这些事件处理程序的优先级自动重新排序，从而解决了问题，而无需我做任何其他工作。

有什么理由为什么这对您也不会起作用？

onClick不应替换为onMouseDown。

尽管这种方法有些奏效，但两者在本质上是不同的事件，在用户眼中具有不同的期望。在这种情况下，使用onMouseDown代替onClick将会破坏软件的可预测性。因此，这两个事件是不可互换的。

举例说明：意外单击按钮时，用户希望能够按住鼠标单击，将光标拖到元素外，然后释放鼠标按钮，最终不会采取任何措施。onClick做这个。onMouseDown不允许用户按住鼠标，而是立即触发操作，而无需用户追索。onClick是我们期望在计算机上触发操作的标准。

在这种情况下，调用event.preventDefault()的onMouseDown事件。onMouseDown默认情况下会导致模糊事件，而在preventDefault调用时不会这样做。然后，onClick将有机会被称为。仅在之后，模糊事件仍然会发生onClick。

毕竟，onClick事件的组合onMouseDown和onMouseUp，当且仅当它们都发生在同一单元内。

替换onmousedown为onfocus。因此，当焦点位于文本框内时将触发此事件。

替换onmouseup为onblur。当您从文本框中移出焦点时，onblur将执行。

我想这就是您可能需要的。

更新：

当您执行功能onfocus时->删除将在onblur中应用的类，并添加要在onfocus中执行的类

和

当您执行函数onblur时->删除将在onfocus中应用的类，并添加要在onblur中执行的类

我认为不需要标志变量。

更新2：

您可以使用事件onmouseout和onmouseover

onmouseover-当光标在其上方时检测。

onmouseout-检测光标何时离开。

一个更优雅（但性能可能更低）的解决方案：

而不是使用输入的onblur删除菜单，请使用document.onclick，它会在之后触发onblur。

但是，这也意味着在单击输入本身时会删除菜单，这是不希望的行为。设置为input.onclick，event.stopPropagation()以避免将单击传播到文档单击事件。

通过onfocus更改onclick

即使onblur和onclick的相处不是很好，但显然onfocus是可以的。因为即使关闭菜单后，onfocus对于在其中单击的元素仍然有效。

我做到了，它奏效了。

您可以setInterval在onBlur处理程序中使用一个函数，如下所示：

<input id="input" onblur="removeMenu()" ... />

function removeMenu() {
    setInterval(function(){
        if (!mouseflag) {
            document.getElementById('menu').innerHTML = '';
        }
    }, 0);
}

该setInterval函数将从onBlur 调用堆栈中删除您的函数，添加（因为您将时间设置为0），此函数将在其他事件处理程序完成后立即被调用