绑定on blur事件的多选下拉菜单中checkbox无法正常点击如何解决？

你为.mylist容器绑定了blur失焦事件，当点击容器内的checkbox时，浏览器会优先将焦点从.mylist转移到被点击的checkbox元素，触发.mylist的blur回调执行隐藏逻辑，所以无法正常选中checkbox。

方案1：基于blur事件最小改动（适配原有代码逻辑） #

利用blur事件的relatedTarget属性判断新获得焦点的元素是否在下拉容器内部，仅当焦点移出整个下拉容器时才执行隐藏，修改后的JS代码如下：

$('.select-text-box').on('click', function() {
  $(".mylist").fadeIn(300, function() {
    $(this).focus();
  });
});

$(".mylist").on('blur', function(e) {
  // 新焦点元素不在当前下拉容器内时才隐藏
  if (!$(this).has(e.relatedTarget).length) {
    $(this).hide();
  }
});

方案2：全局点击区域判断（兼容性更稳定） #

放弃blur事件的实现方式，改为监听全局点击事件，仅当点击区域既不是下拉触发框、也不是下拉容器内部时才隐藏下拉框，完全避免焦点转移带来的各类异常问题，修改后的JS代码如下：

$('.select-text-box').on('click', function(e) {
  // 阻止点击事件冒泡到document
  e.stopPropagation();
  $(".mylist").fadeIn(300);
});

$('.mylist').on('click', function(e) {
  // 阻止下拉容器内的点击事件冒泡到document
  e.stopPropagation();
});

// 监听全局点击，非触发区域/下拉区域的点击才隐藏下拉框
$(document).on('click', function() {
  $(".mylist").hide();
});

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