1

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

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

假设您当前专注于输入标签，然后将鼠标悬停在“a”标签上并单击它。浏览器将首先处理 onblur 事件。

blur 事件的任务是它应该隐藏结果 div，但您仍然希望能够在此之前单击结果 div 中的链接。

4

2 回答 2

1

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

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

    jsFiddle 演示

  • 另一种选择是使用链接上的mouseenter/mouseleave事件，并在事件处理程序之间使用公共标志，以便它们彼此了解。

  • 还有一个：你可以用一个简短的动画隐藏 div，所以当点击发生时它实际上仍然存在。像这样的东西：

     $('.results').hide(1000);

    jsFiddle 演示

注意：你应该看看高级事件处理，内联事件处理程序真的会很快搞砸你的 HTML。关注点分离有助于他人和未来的自己。如果你使用 jQuery（查看你的问题下的标签），你应该使用 jQuery 的事件处理方法，它已经使用了高级模型。

于 2013-01-25T17:56:50.833 回答
0

I agree with Marcell's comment, though perhaps more from a usability perspective.

Assigning a timeout (as suggested by bažmegakapa) means you're choosing an arbitrary time limit that may or may not fire before the user has processed what they are supposed to do before that time limit is over. Unless your UI somehow makes it clear that they must react within a given time frame, this is likely to lead to frustrated users.

Even taking for granted that the users have had time to process the directions on screen, there's also transition time between moving from keyboard to mouse (or touch, where it's even worse as you have to deal with the UI shifting to hide the soft-keyboard), which means there's even more variance between different users' and their ability to follow the directions before the time limit you've chosen is over.

Just something to think about, in regard to how your interactivity is set up.

于 2013-01-25T18:06:53.603 回答