如何在IE11中处理event.detail？替代方案及函数重构

这个问题我之前也碰到过，IE11对MouseEvent.detail的处理确实和现代浏览器不一样——它没办法通过这个属性正确返回点击次数（比如双击时e.detail不会变成2），所以你原来依赖e.detail的逻辑在IE11里自然失效了。下面给你完整的修复方案和重构代码：

核心思路：用计时器+点击计数替代e.detail #

现代浏览器靠e.detail判断点击次数，但IE11不支持这个特性，我们可以通过记录点击间隔来区分单击和双击：

• 第一次点击时启动计时器（阈值建议用300ms，和浏览器默认双击间隔一致，也可以保留你原来的180ms）
• 计时器到期前如果收到第二次点击，判定为双击，执行对应逻辑
• 计时器到期后没有第二次点击，判定为单击，执行单击逻辑

额外兼容：修复IE11不支持的Element.closest() #

你的代码里用到了closest()方法，但IE11原生不支持这个API，所以需要先添加兼容补丁：

// 先兼容Element.matches（IE11需要前缀）
if (!Element.prototype.matches) {
  Element.prototype.matches = 
    Element.prototype.msMatchesSelector || 
    Element.prototype.webkitMatchesSelector;
}

// 实现兼容IE11的closest函数
function closest(el, selector) {
  while (el && el.nodeType === 1) {
    if (el.matches(selector)) {
      return el;
    }
    el = el.parentNode;
  }
  return null;
}

重构后的完整代码 #

替换你原来的xorClick函数，去掉对e.detail的依赖：

let pendingClick = null;
let clickCount = 0; // 记录连续点击次数

function xorClick(e) {
  // 清除之前的计时器
  if (pendingClick) {
    clearTimeout(pendingClick);
    pendingClick = null;
  }

  clickCount++;

  // 用计时器判断是单击还是双击（这里用180ms和你原来的逻辑保持一致）
  pendingClick = setTimeout(function() {
    const parent = closest(e.target, '.ui-treenode-content');
    if (!parent) return; // 找不到父元素则终止逻辑

    if (clickCount === 1) {
      // 单击逻辑：触发父元素点击
      parent.click();
    } else if (clickCount === 2) {
      // 双击逻辑：触发父元素第一个子元素点击
      parent.firstChild.click();
    }

    // 重置点击计数，准备下一轮判断
    clickCount = 0;
  }, 180);

  stopClick(e);
}

// 保留你原来的stopClick函数，它已经做了IE11兼容
function stopClick(e) {
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
  e.stopPropagation();
}

为什么这个方案能兼容IE11？ #

1. 完全抛弃了e.detail，用通用的计时器逻辑判断点击类型，所有浏览器都支持
2. 补充了closest()和matches()的IE11兼容补丁，确保元素查找逻辑正常
3. 保持了你原来的业务逻辑（单击触发父元素点击，双击触发第一个子元素点击）

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