onclick() 和 onblur() 排序问题

Question

我有一个输入字段，它会显示一个自定义下拉菜单。我想要以下功能：

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

这是我的实现：

输入字段有一个onblur() 事件，当用户在输入字段外单击时删除菜单（通过将其父级的innerHTML 设置为空字符串）。菜单中的 div 也有onclick() 事件执行特殊处理。

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

我通过将菜单 div 的 onclick() 拆分为 onmousedown() 和 onmouseup() 事件并在鼠标按下时设置一个全局标志来解决问题，该标志在鼠标抬起时被清除，类似于 this answer 中的建议。因为onmousedown() 在onblur() 之前触发，所以如果单击了其中一个菜单div，则该标志将设置在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;
    ...
}

Answer 1

onClick 不应替换为 onMouseDown。

虽然这种方法有些工作，但两者是根本不同的事件，在用户眼中具有不同的期望。在这种情况下，使用onMouseDown 而不是onClick 会破坏软件的可预测性。因此，这两个事件是不可互换的。

举例说明：当不小心点击一个按钮时，用户期望能够按住鼠标点击，将光标拖到元素外，然后松开鼠标按钮，最终导致没有动作。 onClick 这样做。 onMouseDown 不允许用户按住鼠标不放，而是会立即触发一个动作，对用户没有任何追索权。 onClick 是我们期望在计算机上触发操作的标准。

在这种情况下，请在 onMouseDown 事件上调用 event.preventDefault()。 onMouseDown 默认会引发模糊事件，在调用preventDefault 时不会这样做。然后，onClick 将有机会被调用。模糊事件仍然会发生，只是在onClick 之后。

毕竟，onClick 事件是 onMouseDown 和 onMouseUp 的组合，当且仅当它们都出现在同一个元素中。

Answer 2

我遇到了和你一样的问题，我的 UI 完全按照你的描述设计。我通过简单地将菜单项的onClick 替换为onMouseDown 解决了这个问题。我什么也没做；没有onMouseUp，没有标志。这解决了这个问题，让浏览器根据这些事件处理程序的优先级自动重新排序，而无需我做任何额外的工作。

有什么理由说明这对你不起作用？

Answer 3

通过 onfocus 改变 onclick

即使onblur和onclick相处得不是很好，但显然onfocus和yes onblur。因为即使在菜单关闭后，onfocus 仍然对内部单击的元素有效。

我做到了，它奏效了。

Answer 4

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

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

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

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

Answer 5

将onmousedown 替换为onfocus。所以当焦点在文本框内时会触发这个事件。

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

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

更新：

当你在 onfocus 上执行你的函数时——>移除你将在 onblur 中应用的类并添加你想要在 onfocus 上执行的类

和

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

我认为不需要标志变量。

更新 2：

您可以使用事件 onmouseout 和 onmouseover

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

onmouseout-检测光标何时离开。