下拉Javascript错误:对象不支持属性或方法'matches'

I'm using the following JavaScript dropdown, which works perfect in all browers except the new Windows Edge.

我正在使用下面的JavaScript下拉菜单，它在所有浏览器中都是完美的，除了新的窗口边缘。

It displays this error:

它显示这个错误:

SCRIPT438: Object doesn't support property or method 'matches'

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

Script:

脚本:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
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');
      }
    }
  }
}

Got the script from: http://www.w3schools.com/howto/howto_js_dropdown.asp which I assumed would be compatible with all platforms. Now I've already implemented it, and ran into problems in Edge.

脚本来自:http://www.w3schools.com/howto/howto_js_drop.asp，我认为它可以兼容所有平台。现在我已经实现了它，并在Edge中遇到了问题。

3 个解决方案

#1

It looks like you try to check if the click event was triggered by an object with the class dropbtn.

看起来您试图检查单击事件是否由具有类dropbtn的对象触发。

If you use jQuery you can do the same like this:

如果您使用jQuery，您可以这样做:

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

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!$(event.target).hasClass('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');
      }
    }
  }
}

If you don't use jQuery you can get the className and then check if dropbtn is one of them.

如果不使用jQuery，可以获取类名，然后检查dropbtn是否是其中之一。

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

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  var classes = event.target.className.split(' ');
  var found = false; var i = 0;
  while (i < classes.length && !found) {
      if (classes[i]=='dropbtn') found = true;
      else ++i;
  }
  if (!found) {
    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');
      }
    }
  }
}

#2

According to http://caniuse.com/#search=matches EDGE has partial support with the prefix 'ms'.

根据http://caniuse.com/#search=matches EDGE, EDGE有部分支持前缀“ms”。

#3

For a cross-browser solution, look at http://youmightnotneedjquery.com/#matches_selector

对于跨浏览器解决方案，请查看http://youmightnotneedjquery.com/#matches_selector

var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

#1