jQuery中输入框聚焦时点击星标首次不触发click事件如何解决

问题根因 #

你遇到的第一次点击星标不触发事件的问题，核心是事件触发顺序和列表重绘的冲突：

• 你给输入框绑定了change事件，该事件会在输入框失去焦点时触发
• 输入框聚焦状态下点击星标时，事件触发顺序为：星标mousedown → 输入框失焦、触发change事件 → 星标mouseup → 星标click
• 你的change事件回调里会重绘搜索结果列表（你注释中标注了要遍历展示列表，实际逻辑应该是先清空原有列表再新增），原有星标元素会被销毁，后续的click事件找不到对应的绑定元素，所以第一次点击无响应
• 第二次点击时输入框已经失焦，不会再触发change事件重绘列表，所以可以正常触发click

解决方案 #

方案1：移除多余的change事件绑定（最推荐） #

你已经给输入框绑定了input、keydown、paste这些实时响应输入的事件，change事件完全是多余的，直接删除即可：

let name = 'foo';

jQuery($ => {
  // 移除事件列表里的change
  $("#search-input").on("keydown paste input", function() {
    if (this.value == "") {
      // 输入为空时清空列表
      $(".search-result").empty();
      return true;
    }

    // 先清空原有列表再新增，避免重复渲染
    $(".search-result").empty();
    // 对对象执行过滤函数，遍历并在下方展示列表
    $(".search-result").append("<li class='searchitem'>" + name + " <i class='favourite far fa-star'></i></li>");
  });

  $(document).on("click", ".favourite", function() {
    alert("hi");
  });
});

方案2：将星标触发事件改为mousedown #

mousedown的触发时机早于输入框的change事件，会在列表重绘前先执行收藏逻辑，不需要修改输入框的事件绑定：

// 把click改成mousedown即可
$(document).on("mousedown", ".favourite", function() {
  alert("hi");
});

方案3：点击星标时阻止默认焦点切换 #

给星标绑定mousedown事件并阻止默认行为，点击时不会让输入框失焦，也就不会触发change事件重绘列表：

$(document).on("mousedown", ".favourite", function(e) {
  e.preventDefault();
}).on("click", ".favourite", function() {
  alert("hi");
});

内容的提问来源于stack exchange，提问作者Gracie williams