带搜索框的下拉框出现闪现bug

使用ul和input实现带搜索效果的下拉框插件。
产生问题:点击ul时,下拉列表偶尔会出现闪现问题,求解决思路

html代码如下:

下拉框图片:

clipboard.png

html 代码:

<label class="label">上级药品类别:</label>
<span class="simulate-select" style="width: 190px;"> 
    <input class="text" placeholder="--请选择--" style="width: 170px;">
    <i class="icon-grid icon-grid-fold-gray" style="position: absolute; top: 1px; left: 170px;">
    </i>
    <select name="upperClass" style="display: none;">
        <option value="">--请选择--</option>
        <option value="10033">asd</option>
        <option value="111">中药</option>
        <option value="20044">西药</option>
        <option value="222">夏桑菊</option>
    </select>
    <ul class="simulate-select-lists" style="width: 189px; display: none;">
        <li class="simulate-select-list" value="">--请选择--</li>
        <li value="10033" class="simulate-select-list">asd</li>
        <li value="111" class="simulate-select-list">中药</li>
        <li value="20044" class="simulate-select-list">西药</li>
        <li value="222" class="simulate-select-list">夏桑菊</li>
    </ul>
</span>

现在有一个问题: 鼠标点击input框时,ul 时不时出不来

ul点击代码和消失代码如下:

  this.target.closest(".simulate-select").on("click", function () {
        console.log("select-click");
        if (!t.isReadOnly) {
            if (!t._hasLoad) {
                if (!t.isApply) {
                    t._loadData();
                    t.isApply = true;
                }
            }
            if( t.auto){
                t.autoEvent();
            }
            t._show();
        }
    }).hover(null, function () {
        console.log("select-hover");
        if( t.auto){
            var tempDisplay = t.target.find("option[value = '" +t.target.val() +"']").text();
            var tempValue =   t.target.closest(".simulate-select").find(".text").val();
            if(tempDisplay == t.preText){
                t.target.closest(".simulate-select").find(".text").val("");
                t.target.closest(".simulate-select").find(".text").attr("placeholder", t.preText);
            }else{
                if( $.trim(tempValue) != tempDisplay ){
                    t.target.closest(".simulate-select").find(".text").val("");
                    t.target.closest(".simulate-select").find(".text").attr("placeholder", t.preText);
                }
                //t.target.closest(".simulate-select").find(".text").val(tempDisplay);
            }
            t.target.closest(".simulate-select").find(".text").blur();
        }
        t.target.closest(".simulate-select").find("ul").hide();
    });

this.target 指的是select : <select name="upperClass" style="display: none;"></select>

闪现时控制台的打印结果是:

clipboard.png
即ul连续执行了显示和消失事件。
不知道问题的产生原因,求教各位,谢谢

阅读 3.7k
1 个回答

同时触发了两个事件吧,click点击时是不是<ul>标签显示出来了,然后鼠标移到ul上触发了select的鼠标离开事件?然后就关闭了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题