阿里巴巴个人网站怎么做,长春网站建设公司哪家好,wordpress 高亮,网站做行测题在主流的搜索引擎上搜索时#xff0c;输入内容#xff0c;往往会弹出智能提示。输入框为input#xff0c;智能提示区域为suggest。接下来一般有两种操作#xff1a; 1.选择某一提示#xff0c;则把内容复制到input中#xff0c;自动关闭suggest#xff1b; 2.点击网页其… 在主流的搜索引擎上搜索时输入内容往往会弹出智能提示。输入框为input智能提示区域为suggest。接下来一般有两种操作 1.选择某一提示则把内容复制到input中自动关闭suggest 2.点击网页其他地方自动关闭suggest。 实现第一个可以用click事件在suggest中增加鼠标click事件在处理中将点击的内容写到input中然后关闭suggest。单独测试无问题实现第二个可以在input元素上增加focusout事件或者blur事件在input中丢失焦点的时候关闭suggest。单独测试无问题。但是放在一起的时候就会出现问题只响应了丢失焦点事件关闭了suggest却没有响应内容点击事件没有获取点击的suggest内容。不明白为什么会冲突在网上搜也搜到了一些同样的问题有人建议使用blur但是blur跟focusout是一样的道理都不行。 思前想后忽然想到click事件的触发条件你点击一个按键触发一次点击事件而一次点击包括鼠标点下去鼠标松开。而jquery的click事件是鼠标松开后才触发的事实上button元素和href元素的点击事件都是这样这样一想就明白刚刚出现的冲突问题了你点中suggest中的某一提示这时候input丢失焦点事件触发关闭了suggest区域而这个时候你的鼠标才松开电脑反应速度要快于鼠标点击松开速度完成点击但此时鼠标已经不在suggest要选择的提示上面了所以也就无法触发suggest里的点击事件。 想明白了这点问题就好解决了把suggest中的响应事假改成mousedown这样在鼠标点的时候就会触发测试了一下果然成功了mousedown事件和focusout事件都得到了正确处理。 //input的丢失焦点事件
$(#input_area).focusout(function(){$(#suggest_div).hide();
});//suggest区域的点击事件
$(#suggest_div li).mousedown(function(){$(#input_area).val($(this).text());$(#suggest_div).hide();
}); 将click换成mousedown就完全ok了简单到我都不好意思说但是有的时候也不容易想到哇 另外在网上还找到了别的方法一个是 $(#input_area).keypress(function() {$(#suggest_div).slideDown();}).blur(function() {$(#suggest_div).slideUp();}); 这种方法用隐藏动画造成了延迟使得suggest区域的click事件可以触发。但是slide可不适应所有情况而且把功能成功与否建立在动画隐藏的速度快慢上个人觉得也不太合适。 另一种方法是将input和suggest用一个div包起来事件直接加在div上面。这个未测试过不过理论上应该也是可行的。 转载于:https://www.cnblogs.com/zhaock/archive/2013/04/25/8353236.html
