Dropdown Javascript错误：对象不支持属性或方法“匹配”

Question

我使用以下JavaScript下拉菜单，它适用于除新Windows Edge之外的所有浏览器。

它显示这个错误：

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

脚本：http://www.w3schools.com/howto/howto_js_dropdown.asp我认为将与所有平台兼容：

/* 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'); 
     } 
    } 
    } 
} 

从拿到剧本。现在我已经实现了它，并在Edge中遇到了问题。

Answer 1

它看起来像你试图检查点击事件是否由类dropbtn的对象触发。

如果你使用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'); 
     } 
    } 
    } 
} 

如果你不使用jQuery你可以得到一个className，然后检查是否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'); 
     } 
    } 
    } 
} 

Answer 2

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

Answer 3

对于一个跨浏览器的解决方案，看看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');