似乎一个元素的 onBlur 是“覆盖"的.另一个人的点击 [英] Seems that onBlur of one element is "overriding" the onclick of another

问题描述

我有两个元素:

<input type="text" name="pmTo" id="pmTo" onkeyup="offerSuggs('none');" onfocus="showSelect();" onblur="hideSelect();" />

还有一个动态创建的(这都是自动建议程序的一部分):

and a dynamically created one (this is all part of an auto suggest program):

$suggString .= '<div name="'.$value.'" id="'.$value.'" class="suggMouseOver" onmouseover="highlightDivs(this);" onmouseout="blurDivs(this);" onclick="fillInput(this);">'.$value.'</div>';

好的，接下来就是input元素的onblur和div元素的onclick对应的事件函数:

Okay, and then there are the event functions that correspond to the onblur of the input element and then the onclick of the div element:

function hideSelect() {
            offerSuggs('checkFinal');
            document.getElementById('nameSugg').style.display="none";
            }


function fillInput(elemName) {
            document.getElementById('pmTo').value=elemName.id;
            }

如何让 onclick 在他们单击的元素上正确触发，而 onblur 事件首先隐藏 div，这使得 onclick 没有意义?但是，当文本框失去焦点时，我仍然希望保留建议 div 消失的功能.

How do I get the onclick to trigger correctly on the element they click on without the onblur event hiding the div first which makes the onclick meaningless? I would still like to retain the functionality of the suggestion div disappearing when the textbox loses focus, however.

推荐答案

我认为您的答案很短，因为您的问题令人困惑.大概您有一个输入，当聚焦时，它会根据输入到输入中的字符显示建议列表.

I think you are short on answers because your question is confusing. Presumably you have an input that, when focussed, shows a list of suggestions based on the characters entered into the input.

如果用户使用光标选择一个项目，那么我想输入的模糊事件在 div 的点击事件之前触发，并且 div 在点击触发之前设置为 display:none，因此错过了分区.

If the user uses the cursor to select an item, then I suppose the blur event of the input fires before the click event of the div and the the div is set to display:none before the click fires, and hence misses the div.

解决方法是在短暂超时后调用 onblur 侦听器，因此:

The fix is to call the onblur listener after a short timeout, so:

  <input ... onblur="setTimeout(function(){hideSelect();}, 100);">

在多个浏览器中测试，可能需要将超时时间设置为200ms左右.在模糊事件之后在建议消失之前是否有短暂的可见延迟并不重要(即有点太长总比有点太短好).

Test in a number of browsers, you may need to set the timeout to 200ms or so. It doesn't matter if there's a short, visible delay after the blur event before the suggestions disappear (i.e. a bit too long is better than a bit too short).

确保这些建议不会掩盖页面上的任何重要内容，否则用户可能会发现它们更多的是障碍而不是帮助.:-)

Make sure the suggestions don't obscure anything important on the page or users may find them more of a hindrance than a help. :-)

这篇关于似乎一个元素的 onBlur 是“覆盖"的.另一个人的点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！