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

jquery web前端开发 事件 JavaScript

壁吧明灯魔王 9 years, 9 months ago

 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

Your Answer