同一页面多个模态框绑定相同keydown事件的响应冲突问题

这事儿我太熟了！你现在碰到的问题，根源在于把keydown事件直接绑定在了document上——不管哪个模态框打开，只要按键触发，所有符合条件的模态框都会执行对应的gotoNext/gotoPrevious逻辑，自然就串了。

核心解决思路：只让当前激活的模态框响应按键 #

我们需要给模态框加上「激活状态标识」（比如一个.active类，或者直接判断是否可见），然后在事件处理时，只针对当前激活的那个模态框执行逻辑。

修改后的代码示例 #

假设你的模态框有统一的类名.modal，激活时会添加.active类，下面是两种可行的修改方案：

方案1：绑定在document，但先筛选激活的模态框

$(document).keydown(function(e) {
  // 第一步：找到当前处于激活状态的模态框内的tbody
  const $activeTbody = $('.modal.active').find('tbody');
  
  // 只有当激活模态框内存在高亮元素时才继续
  if (!$activeTbody.find('.' + highlightClass).length) return;

  // 过滤上下箭头以外的按键
  if (e.which !== 40 && e.which !== 38) return false;

  if (e.which === 40) { // 下箭头
    // 把激活模态框的tbody传给gotoNext，确保操作的是当前模态框的内容
    gotoNext($activeTbody);
    e.preventDefault();
  } else if (e.which === 38) { // 上箭头
    gotoPrevious($activeTbody);
    e.preventDefault();
  }
});

方案2：直接绑定到模态框，判断可见性再执行

这种方式更精准，事件只绑定在模态框本身，只有当前可见的模态框才会响应：

$('.modal').keydown(function(e) {
  // 先判断当前模态框是否可见，不可见直接跳过
  if (!$(this).is(':visible')) return;

  const $tbody = $(this).find('tbody');
  if (!$tbody.find('.' + highlightClass).length) return;

  if (e.which !== 40 && e.which !== 38) return false;

  if (e.which === 40) {
    // 用call把this指向当前模态框，让gotoNext能拿到正确的上下文
    gotoNext.call(this);
    e.preventDefault();
  } else if (e.which === 38) {
    gotoPrevious.call(this);
    e.preventDefault();
  }
});

配套修改：让gotoNext/gotoPrevious支持上下文 #

原来的gotoNext和gotoPrevious大概率是依赖全局元素的，我们需要调整它们，让它们能接收当前模态框的上下文：

// 方案1对应的函数：接收tbody参数
function gotoNext($tbody) {
  const currentHighlight = $tbody.find('.' + highlightClass);
  const nextEl = currentHighlight.next();
  if (nextEl.length) {
    currentHighlight.removeClass(highlightClass);
    nextEl.addClass(highlightClass);
  }
}

// 方案2对应的函数：通过this获取当前模态框
function gotoNext() {
  const $tbody = $(this).find('tbody');
  const currentHighlight = $tbody.find('.' + highlightClass);
  const nextEl = currentHighlight.next();
  if (nextEl.length) {
    currentHighlight.removeClass(highlightClass);
    nextEl.addClass(highlightClass);
  }
}

这样调整后，不管打开多少个模态框，只有当前激活/可见的那个会响应上下箭头操作，其他模态框完全不受影响。

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