相关疑难解决方法(0)

我有一个输入字段,显示自定义下拉菜单.我想要以下功能:

• 当用户单击输入字段外的任何位置时,应删除菜单.
• 更具体地说,如果用户点击菜单中的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;
    ...
}