IE中Ctrl+点击及非主鼠标点击无法触发Click事件的解决问询

我之前也踩过IE这个Ctrl+点击的坑，太懂这种无语的感觉了！其实根源在于IE会把Ctrl+左键点击识别为“在新标签打开链接”的默认浏览器行为，所以会直接抑制click事件的触发，只抛出mousedown和mouseup事件，这也是为什么你能捕获到后两个事件的原因。

下面给你两种可行的解决方案，覆盖不同场景：

方案一：原生JS监听mousedown+mouseup模拟click逻辑 #

核心思路是通过记录Ctrl键的按压状态，在mouseup时判断是否满足Ctrl+左键点击的条件，然后手动执行你的点击逻辑，同时阻止浏览器默认行为：

let isCtrlPressed = false;
const targetElement = document.getElementById('your-target-element'); // 替换成你的目标元素

// 记录Ctrl键按压状态
targetElement.addEventListener('mousedown', function(e) {
  // 兼容IE8及以下的事件对象
  e = e || window.event;
  isCtrlPressed = e.ctrlKey;
});

// 在mouseup时触发自定义逻辑
targetElement.addEventListener('mouseup', function(e) {
  e = e || window.event;
  // 判断是否是左键点击（e.button===0为左键）且Ctrl键按下
  if (isCtrlPressed && e.button === 0) {
    // 这里放入你原本click事件中的处理代码
    handleCtrlClick(e);
    
    // 阻止浏览器默认行为，避免自动打开新标签
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false; // IE8及以下的阻止方式
    }
  }
  // 重置状态，避免后续点击误触发
  isCtrlPressed = false;
});

// 自定义的Ctrl点击处理函数
function handleCtrlClick(event) {
  console.log('Ctrl+点击触发了！');
  // 你的业务逻辑...
}

方案二：jQuery版本（如果项目用了jQuery） #

如果你的项目依赖jQuery，可以简化兼容处理：

let isCtrlPressed = false;
$('#your-target-element')
  .on('mousedown', function(e) {
    isCtrlPressed = e.ctrlKey;
  })
  .on('mouseup', function(e) {
    if (isCtrlPressed && e.button === 0) {
      handleCtrlClick(e);
      e.preventDefault(); // jQuery统一处理默认行为
    }
    isCtrlPressed = false;
  });

function handleCtrlClick(event) {
  // 业务逻辑...
}

关键注意事项 #

• 必须调用preventDefault()（或IE8的returnValue=false），否则IE会偷偷执行打开新标签的默认行为，打乱你的逻辑。
• 一定要判断e.button === 0，避免右键点击时误触发逻辑。
• 在各IE兼容模式下测试时，注意事件对象的获取方式——IE8及以下不支持标准的事件参数，需要用window.event获取。

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