Javascript新手 - 似乎一个元素的onBlur是“覆盖”另一个人的onclick [英] Javascript newbie - 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>';
好的,然后有一些事件函数对应于输入元素的onblur,然后是点击div元素:
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. Thanks.
推荐答案
我认为你的答案很简短,因为你的问题令人困惑。据推测,您有一个输入,在聚焦时,根据输入到输入中的字符显示建议列表。
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的click事件之前触发并且div设置为显示:在点击之前没有,因此错过了div。
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. :-)
这篇关于Javascript新手 - 似乎一个元素的onBlur是“覆盖”另一个人的onclick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!