元素切换脚本IE11兼容问题求助：matches方法未被支持

你遇到的核心问题是IE11不支持标准的Element.matches()API，它仅提供了带微软前缀的替代方法msMatchesSelector()。我们可以通过兼容性处理来解决这个报错，下面是具体的修复方案：

修复思路 #

我们可以给Element原型添加一个兼容层，优先使用标准方法，不存在时回退到IE11支持的前缀方法，这样原代码的逻辑不需要大幅修改。

修复后的完整代码 #

JavaScript 部分

/* 兼容性polyfill：为Element添加matches的兼容实现 */
if (!Element.prototype.matches) {
  Element.prototype.matches = 
    Element.prototype.msMatchesSelector || 
    Element.prototype.matches;
}

/* 点击按钮切换下拉内容的显示/隐藏 */
function myFunction() {
  document.getElementsByClassName("dropdown-content")[0].classList.toggle("show");
}

// 阻止下拉内容的点击事件冒泡到window
document.getElementsByClassName("dropdown-content")[0].addEventListener('click', function(event) {
  event.stopPropagation();
});

// 点击外部区域关闭下拉菜单
window.onclick = function(event) {
  if (!event.target.matches('#dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

CSS 部分

.dropbtn {
  background-color: lime;
}

.dropdown-content {
  display: none;
}

.show {
  display: block;
}

HTML 部分

<meta name="viewport" content="width=device-width">
<button id="dropbtn" onclick="myFunction()">Dropdown</button>
<div class="dropdown-content" style="background:red; height: 300px;"></div>

另一种轻量写法（不修改原型） #

如果你不想修改Element的原型，也可以直接在判断逻辑中做兼容处理：

// 点击外部区域关闭下拉菜单
window.onclick = function(event) {
  const target = event.target;
  // 兼容IE11的选择器匹配判断
  const isDropbtn = target.matches ? target.matches('#dropbtn') : target.msMatchesSelector('#dropbtn');
  
  if (!isDropbtn) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

后续提示 #

你也可以查看Barmars的答案及原提问者下方的答案，了解该功能成功兼容IE11的其他实现方式。

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