Question

让我们假设我们有这个示例代码：

<input type="text" onblur="blurHandler()" />
<div class="results">
    <ul>
        <li><a href="#" onclick="clickHandler(this);">sampleText</a></li>
    </ul>
</div>

假设您当前关注的是输入标记，并将鼠标悬停在“a”标记上并单击它。浏览器将首先处理onblur事件。

模糊事件的任务是它应该隐藏结果div，但是你仍然希望能够在结果div之前点击结果div中的链接。

Answer 1

在blurHandler中，使用setTimeout()来延迟隐藏您的div。

function blurHandler() {
    setTimeout(function () {
        //close the div
    }, 100);
    //do whatever else needs to be done
}

jsFiddle Demo

另一种选择是使用链接上的mouseenter / mouseleave事件，并在事件处理程序之间使用公共标记，以便彼此了解。
还有一个：你可以用短动画隐藏div，所以当点击发生时它实际上仍然存在。像这样：
```
 $('.results').hide(1000);
```
jsFiddle Demo

注意：您应该看一下advanced event handling，内联事件处理程序可以快速搞砸您的HTML。关注点分离有助于他人和您未来的自我。如果您使用jQuery（查看问题下的标记），您应该使用jQuery的事件处理方法，它们已经使用了高级模型。

Answer 2

我同意Marcell的评论，但从可用性的角度来看可能更多。

指定超时（由bažmegakapa建议）意味着您选择一个任意时间限制，可能会或可能不会在用户处理该时间限制结束之前应该执行的操作之前触发。除非您的UI以某种方式明确表示他们必须在给定的时间范围内做出反应，否则这可能会导致用户感到沮丧。

即使理所当然地认为用户有时间在屏幕上处理指示，也有从键盘移动到鼠标之间的过渡时间（或触摸，因为你必须处理UI移动以隐藏软键盘），这意味着不同用户之间的差异更大，以及他们在您选择的时间限制结束前遵循指示的能力。

关于如何设置交互性，需要考虑的事情。

如何写一个聪明的onblur事件

2 个答案: