onclick() and onblur() ordering issue onclick()和onblur()的排序问题

25 浏览
0 Comments

onclick() and onblur() ordering issue onclick()和onblur()的排序问题

我有一个输入框，它会弹出一个自定义的下拉菜单。我希望实现以下功能：

  • 当用户在输入框外的任何地方点击时，菜单应该被移除。
  • 如果用户点击菜单内的一个特定的div时，菜单应该被移除，并且根据点击的div执行特殊处理。

这是我的实现方法：

输入框有一个onblur()事件，当用户点击输入框外部时，会通过将其父元素的innerHTML设置为空字符串来删除菜单。菜单内的div也有onclick()事件，用于执行特殊处理。

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

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

有没有更优雅的解决方案？

代码大致如下：

...

var mouseflag;
function setFlag() {
    mouseflag = true;
}
function removeMenu() {
    if (!mouseflag) {
        document.getElementById('menu').innerHTML = '';
    }
}
function doProcessing(id, name) {
    mouseflag = false;
    ...
}

0