IE11中MouseEvent detail属性替代方案：点击计数始终返回0的求助

这个问题我之前在兼容IE11的时候也踩过坑！IE11对MouseEvent.detail的实现和标准浏览器差异很大——它只在双击、三击这类多击事件里才会返回对应数值，普通单击事件里始终返回0，完全没法用来统计点击次数。下面给你两个靠谱的替代方案：

方案一：用元素自定义属性维护计数器 #

我们可以给按钮绑定一个自定义data-*属性来存储点击次数，每次点击时更新并读取这个值，兼容性拉满：

JavaScript代码 #

function myFun(event) {
    // 获取当前点击次数，默认值为0
    let clickCount = parseInt(event.target.getAttribute('data-click-count')) || 0;
    clickCount++;
    // 更新元素的自定义属性
    event.target.setAttribute('data-click-count', clickCount);
    console.log(clickCount);
}

HTML代码 #

<div id="banner-message">
  <p>Hello World</p>
  <button onclick="myFun(event)" data-click-count="0">Click Me</button>
</div>

这种方式简单直接，不需要额外的逻辑封装，适合快速改造现有代码。

方案二：用闭包封装私有计数器 #

如果不想给元素添加自定义属性，可以用闭包来保存计数器的状态，让变量私有化，避免全局污染：

JavaScript代码 #

// 封装一个返回点击处理函数的闭包
const createClickHandler = () => {
    let clickCount = 0;
    return function(event) {
        clickCount++;
        console.log(clickCount);
    }
};

// 给按钮绑定点击事件
document.querySelector('#banner-message button').addEventListener('click', createClickHandler());

HTML代码 #

<div id="banner-message">
  <p>Hello World</p>
  <button>Click Me</button>
</div>

这种方式更符合模块化的写法，适合新开发的场景，计数器变量不会暴露到全局作用域里。

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