下拉 Javascript 错误:对象不支持属性或方法“匹配”
Dropdown Javascript error: object doesn't support property or method 'matches'
我正在使用以下JavaScript下拉列表,除了新的Windows Edge之外,它在所有浏览器中都非常有效。
它显示此错误:
SCRIPT438:对象不支持属性或方法"匹配"
脚本:
/* 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');
}
}
}
}
从以下位置获取脚本:我认为 http://www.w3schools.com/howto/howto_js_dropdown.asp 它将与所有平台兼容。现在我已经实现了它,并在 Edge 中遇到了问题。
看起来您尝试检查单击事件是否由具有类 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');
}
}
}
}
正如之前提到的,IE11 部分支持它。试试这个
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector;
}
有关跨浏览器解决方案,请查看 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');
根据
http://caniuse.com/#search=matches EDGE对前缀"ms"的部分支持。
相关文章:
- JQuery:向多个匹配结果添加换行符的最简单方法
- 识别值是否与 jqGrid 数据中的任何键匹配的正确方法是什么?
- Javascript find 方法在第一次匹配后不会停止
- 下拉 Javascript 错误:对象不支持属性或方法“匹配”
- 有没有一种方法可以找到一个匹配两个不同填充的文档,并在findOne()中获取他的文档
- 什么's是在两个(或多个)阵列中找到匹配的细胞序列的最有效方法
- 方法来使用jQuery选择匹配的数据元素
- 有没有一种方法可以在jQuery中只选择匹配的元素而不选择它们的子元素
- 模板抛出-未捕获类型错误:无法调用方法'匹配'的未定义
- "TypeError:无法调用方法'匹配'未定义的“;Angular JS指令中的Morris
- 任何匹配模式的方法,要么在某个字符之前,要么在某个字符之后
- jQuery / Javascript方法获取当前页面的标题,将其与字符串匹配,将类分配给该特定元素
- 将某些内容与一堆斜杠匹配的正确方法
- 有没有更好的方法来匹配 JavaScript 中 URL 路径名的一部分
- ES6 的特定方法,用于遍历两个数组并在每个数组中查找匹配项
- 使用过多的 for() 循环在数组中搜索匹配项的替代方法
- 检查 JS 对象是否匹配值的最佳方法
- 调用方法“Mongol_verifyDoc”时出现异常 引用错误:未定义匹配项
- Jquery / Handlebars错误消息 - 未捕获的类型错误:对象[对象对象]没有方法“匹配”
- 指定与行末尾的句点匹配的JavaScript正则表达式的正确方法是什么