Question

我在IE中收到错误：

对象不支持属性或方法'matches'“。

尝试在外部点击时关闭下拉列表。

以下是代码：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Options</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#directory" class="directory">Content Directory</a>
    <a href="#objective" class="objective">Objectives</a>
    <a href="#reference" class="reference">Reference</a>
    <a href="#help" class="help">Help</a>
  </div>
</div>

Answer 1

请参阅https://stackoverflow.com/a/34994338/746984

上的回答

$(document).click(function(event) { 
    if(!$(event.target).closest('#myDropdown').length) {
        if($('#myDropdown').is(":visible")) {
            $('#myDropdown').hide();
        }
    }        
});

为我工作。我还向w3schools发送了信息，他们提供了有问题的原始示例。

Answer 2

我花了15分钟试图弄清楚。

使用相同的代码，但将.matches更改为.contains并摆脱该感叹号。

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function (event) {
  if (event.target.contains(".dropbtn")) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains("show")) {
      openDropdown.classList.remove("show");
    }
  }
};

这应该可以解决所有问题，而不会造成任何混乱。

event.target.matches在IE中不起作用

2 个答案: