jquery点击click事件和blur事件冲突如何解决?
问题:鼠标在下拉框中点击选择时,前面的几个都可以被获取然后赋值到输入框中,但是最后一个不行。好像是click事件和blur事件冲突,才导致最后一个不能获取赋值。代码和示例如下,jquery代码该如何优化才行?
<input type="text" id="input1" value="xx"/>
<ul id="pulldown">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
(function($){
$("#input1").focus(function(){
$("#input1").css({"text-align":"center"});
$("#pulldown").slideDown(300);
}).blur(function(){
$("#pulldown").slideUp(300);
});
$("#pulldown>li").click(function(){
$("#input1").val($(this).text());
});
})(jQuery);
壁吧明灯魔王
9 years, 9 months ago
Answers
javascript
(function($){ $("#input1").focus(function(){ $("#input1").css({"text-align":"center"}); $("#pulldown").slideDown(300); }).blur(function(){ setTimeout(function () { $("#pulldown").slideUp(300); }, 300); }); $("#pulldown>li").click(function(){ $("#input1").val($(this).text()); }); })(jQuery);
最后一个点击无效,是因为点击最后一个
li
的时候,先执行的是
blur
事件,所以
#pluudown
收缩了,
click
不到最后一个
li
;
高呼吾名零娘娘
answered 9 years, 9 months ago