开发者社区> 问答> 正文

jquery点击click事件和blur事件冲突如何解决?

问题:鼠标在下拉框中点击选择时,前面的几个都可以被获取然后赋值到输入框中,但是最后一个不行。好像是click事件和blur事件冲突,才导致最后一个不能获取赋值。代码和示例如下,jquery代码该如何优化才行?
screenshot

<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);

展开
收起
小旋风柴进 2016-03-26 11:27:30 2380 0
1 条回答
写回答
取消 提交回答
  •   (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;

    2019-07-17 19:15:53
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载