Jquery/Javascript日期选择器概念插件

我试着模仿datepicker的功能，比如聚焦、模糊和点击。 焦点：当光标位于文本字段时，日期框出现 模糊：当光标不在文本字段中时，日期框消失 单击：当用户单击日期框时，文本字段中的新值消失

我试图创造一个类似的概念： 焦点：当光标位于文本字段时，将显示带有图标的div 模糊：图标将消失 点击：点击图标时，会执行一定的逻辑代码

问题: 当我尝试单击图标时，会首先调用模糊事件，因此单击事件不会触发

这是我的密码：

$（文档）.ready（函数（）{
$（“.test”）.searchHelp（）；
$（“.test2”）.searchHelp（）；
});
（函数（$）{
$.fn.extend({
搜索帮助：功能（选项）{
返回此值。每个（函数（）{
var$this=$（this）；
var searchIcon=newSearchIcon（）；
var helpTable=newSearchHelpTable（）；
jQuery（“body”）.prepend（searchIcon）；
jQuery（“body”）.prepend（helpTable）；
var x=$this.position（）.left+$this.width（）；
变量y=$this.position（）.top；
var once=假；
css（{position:'absolute'，left:x，top:y}）；
$this.bind（“焦点”，函数（）{
searchIcon.show（）；
});
$this.bind（“模糊”，函数（）{
searchIcon.hide（）；
});
/*$（文档）.bind（'mousedown'，函数（ev）{
如果（ev.target！=搜索图标）{
searchIcon.hide（）；
}
});*/
搜索图标。单击（函数（）{
/*helpTable.show（）；
如果（！一次）{
jQuery（“tr”，helpTable）.dblclick（函数（）{
$this.val（$（this.children（“td._key”）.text（））；
helpTable.hide（）；
searchIcon.hide（）；
});
一次=真；
}*/
警惕（“做点什么！”）；
});
});
函数newSearchIcon（）{
var icon=jQuery（“”）；
图标。追加（“[@]”）；
hide（）；
返回图标；
}
函数newSearchHelpTable（）{
var helpSHTable=jQuery（“”）；
helpSHTable.load（“from.htm”）；
helpSHTable.hide（）；
返回helpSHTable；
}
}
});
})（jQuery）；

div.searchHelp表tbody tr:hover{
背景：橙色；
}
div.searchHelp表tbody tr:激活{
背景：红色；
}
div.searchHelp表tbody tr td.\u键{
背景：绿色；
}

我希望能得到你们的帮助，如果你们改变主意，谢谢

searchIcon.click(function(){

到

mousedown在输入失去焦点之前触发。但是，在鼠标向下运行后，仍会隐藏图标。如果不希望图标在单击后消失，请让鼠标向下设置一个标志，然后让模糊检查该标志。大概是这样的：

var iconClicked=false;

searchIcon.mousedown(function(){
   ...
   iconClicked=true;
}

$this.bind("blur",function(){
   if(iconClicked){
      iconCLicked=false;
   }else{
      searchIcon.hide();
   }
});

唯一的缺点是，这是鼠标向下，而不是点击，但这取决于你试图这样做，这可能是可以接受的

编辑：发现这个，第一个建议很有趣

searchIcon.mousedown(function(){

var iconClicked=false;

searchIcon.mousedown(function(){
   ...
   iconClicked=true;
}

$this.bind("blur",function(){
   if(iconClicked){
      iconCLicked=false;
   }else{
      searchIcon.hide();
   }
});