标签：onblur javascript javascript-events onclick

我有两个要素：

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

和一个动态创建的(这是自动建议程序的所有部分)：

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

好的,然后有一些事件函数对应于输入元素的onblur,然后是div元素的onclick：

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


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

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

解决方法:

我认为你的答案很简短,因为你的问题令人困惑.据推测,您有一个输入,在聚焦时,根据输入到输入中的字符显示建议列表.

如果用户使用光标选择一个项目,那么我认为输入的blur事件在div的click事件之前触发,并且div在click触发之前设置为display：none,因此错过了div.

修复是在短暂超时后调用onblur监听器,因此：

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

在许多浏览器中测试,您可能需要将超时设置为200ms左右.如果在建议消失之前模糊事件之后存在短暂的可见延迟,则无关紧要(即,有点太长会比有点太短).

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

标签：onblur,javascript,javascript-events,onclick
来源： https://codeday.me/bug/20190723/1516443.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。