onclick（）和onblur（）排序问题 [英] onclick() and onblur() ordering issue

问题描述

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

I have an input field that brings up a custom drop-down menu. I would like the following functionality:

• 当用户点击输入字段外的任何地方时，应该删除菜单。


• 如果更具体地说，用户点击菜单中的div，则应删除菜单，和应根据点击的div进行特殊处理。

• When the user clicks anywhere outside the input field, the menu should be removed.
• If, more specifically, the user clicks on a div inside the menu, the menu should be removed, and special processing should occur based on which div was clicked.

这是我的实现：

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

The input field has an onblur() event which deletes the menu (by setting its parent's innerHTML to an empty string) whenever the user clicks outside the input field. The divs inside the menu also have onclick() events which execute the special processing.

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

The problem is that the onclick() events never fire when the menu is clicked, because the input field's onblur() fires first and deletes the menu, including the onclick()s!

我通过将菜单div' onclick（）拆分为 onmousedown解决了这个问题（ ）和 onmouseup（）事件并在鼠标按下时设置一个全局标志，在鼠标按下时清除，类似于这个答案。因为 onmousedown（）在 onblur（）之前触发，该标志将在 onblur中设置（ ）如果单击了其中一个菜单div，而不是屏幕上的其他位置。如果单击菜单，我立即从 onblur（）返回而不删除菜单，然后等待 onclick（）点火，此时我可以安全地删除菜单。

I solved the problem by splitting the menu divs' onclick() into onmousedown() and onmouseup() events and setting a global flag on mouse down which is cleared on mouse up, similar to what was suggested in this answer. Because onmousedown() fires before onblur(), the flag will be set in onblur() if one of the menu divs was clicked, but not if somewhere else on the screen was. If the menu was clicked, I immediately return from onblur() without deleting the menu, then wait for the onclick() to fire, at which point I can safely delete the menu.

有更优雅的解决方案吗？

Is there a more elegant solution?

代码如下所示：

<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完全按照您的描述进行设计。我通过简单地用onMouseDown替换菜单项的onClick来解决问题。我什么都没做;没有onMouseUp，没有标志。这解决了这个问题，让浏览器根据这些事件处理程序的优先级自动重新排序，而不需要我做任何额外的工作。

I was having the exact same issue as you, my UI is designed exactly as you describe. I solved the problem by simply replacing the onClick for the menu items with an onMouseDown. I did nothing else; no onMouseUp, no flags. This resolved the problem by letting the browser automatically re-order based on the priority of these event handlers, without any additional work from me.

有什么理由说这不会对你有用吗？

Is there any reason why this wouldn't have also worked for you?

这篇关于onclick（）和onblur（）排序问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！