Question

例如，我需要在处理onblur / onfocus事件时执行某些功能（一个元素失去焦点而其他元素已经成为焦点）。

更具体地说，我有以下内容。

<div id="foo" tabIndex="1" onblur="document.getElementById('bar').style.display = 'none';">foo</div>
<div id="bar" tabIndex="2" onclick="alert('bar');">bar</div>
<div>stuff</div>

让我们假设元素'foo'是集中的。当'foo'失去焦点时，我应该隐藏元素'bar'。但如果我点击“酒吧”，我应该看到警报。它不起作用，因为在处理事件onblur之后，元素'bar'是不可见的，并且既不会发生onclick也不会发生onfocus。

Answer 1

只需在代码中管理它。

<script type="text/javascript">
var blurTimeout;
function Blur(el)
{
    blurTimeout = setTimeout(function() 
    {
        SomeFunction();
    }, 500);
}
function Focus(el)
{
    if (blurTimeout)
        cancelTimeout(blurTimeout);
}
</script>
<input id="input1" type="text" onblur="Blur(this);" />
<input id="input2" type="text" onfocus="Focus(this);" />

修改

更新。现在您只需要将Focus处理程序附加到一个元素。

模糊处理程序设置1/2秒超时，将调用SomeFunction()。 Focus处理程序取消超时以阻止函数调用。您可以调整延迟以使其看起来更直接，但根据您的要求，它必须是异步的。

这是一个相当愚蠢的解决方案。如果我发现自己在生产代码中写这个，我会重新考虑设计或（如果可能的话）重新审视要求。

是否有可能推迟执行某些javascript函数，直到完全处理浏览器事件？

1 个答案: