文章不存在_百度首页1723人阅读
在做项目时，有这样一个需求，需要点击Input显示隐藏下拉面板，从中选择内容填充入文本框。
最开始思路：
（1）文本框与下拉面板作为一个整体，整体失去焦点后，隐藏下拉面板，不可行；
（2）文本框正拥有焦点，此时点击面板，尝试先触发面板的点击事件再通过文本框的失去焦点事件
以上思路最终均不可行，原因：
（1）div没有获取焦点之说，何来失去焦点；
（2）文本框触发焦点事件总是会先执行，面板隐藏后无法再触发其点击事件；
最后解决思路：利用冒泡机制，将点击事件绑定在父容器中，如果有点击事件，判断target如果不是文本框并且不是下拉面板，则隐藏下拉面板（有点排除法意味）；
demo在线演示：
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
&link rel=&stylesheet& type=&text/css& href=&/uploads/rs/294/c4c2o6mh/base.css&&
.main{width: 400height: 400background-color: #F0F8FF;}
.item{width: 153height: 100background-color: #B9D3EE;position:left: 60}
&div class=&main fn-re& id=&t&&
选择类别：&input id=&t-1& type=&text& /&
&div id=&t-2& class=&item fn-hide&&&/div&
&script type=&text/javascript& src=&/uploads/rs/294/c4c2o6mh/jquery.js&&&/script&
var main = $('.main'),
input = $('input'),
item = $('.item');
input.focus(function(){
item.css('display','block');
//开始想使用blur事件来处理，不好用
main.click(function(ev){
var id = ev.target.
if(id!='t-1'&&id!='t-2')
$('.item').hide();
写的过程新发现：下面代码如果将target换成this,则会出现一些问题。打印之发现：this取得是整个父节点，而target获取的是点击时候的子节点
main.click(function(ev){
var id = ev.target.
if(id!='t-1'&&id!='t-2')
$('.item').hide();
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：29549次
排名：千里之外
原创：15篇
(8)(1)(1)(9)(1)工信部备案号：湘ICP备号　增值电信业务经营许可证：湘B2-　百信手机网年版权所有
安卓手机版}