Question

我想为IE填充Element.matches方法。
我在MDN上找到了这些代码：

if (!Element.prototype.matches) {
Element.prototype.matches = 
    Element.prototype.matchesSelector || 
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector || 
    Element.prototype.oMatchesSelector || 
    Element.prototype.webkitMatchesSelector ||
    function(s) {
        var matches = (this.document || 
    this.ownerDocument).querySelectorAll(s),
            i = matches.length;
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1;            
    };
}

所以我写了一些代码：

function matches(node, selector) {
if (node.matches) {
    return node.matches(selector)
}

const match = node.matchesSelector || 
                            node.webkitMatchesSelector || 
                            node.mozMatchesSelector || 
                            node.msMatchesSelector || 
                            node.oMatchesSelector || 
                            function (s) {
           const matches = (node.ownerDocument || document).querySelectorAll(s) 
                                let i = matches.length
                                while (--i >= 0 && matches[i] !== node) {}
                                return i > -1
                           }
     return match(selector)
   }

虽然，我知道这将适用于IE以外的大多数浏览器我删除了大部分代码，并为IE测试了它，这很有效：

function match(node, selector) {
        return node.msMatchesSelector(selector)
}

我想知道为什么这不起作用：

function match(node, selector) {
      var isMatch = node.msMatchesSelector
      return isMatch(selector)
}

Answer 1

原因

return node.msMatchesSelector(selector)

有效，

var isMatch = node.msMatchesSelector
return isMatch(selector)

不是因为在第二种情况下，isMatch（this）的上下文是undefined而不是node。你可以这样写，假设IE支持bind()：

var isMatch = node.msMatchesSelector.bind(node)
return isMatch(selector)

或者只是简单地包装该函数以确保您不需要bind()的支持：

var isMatch = function (s) { return node.msMatchesSelector(s) }
return isMatch(selector)

但这似乎相当无聊，因为你只使用了一次这个函数，所以你不妨在一行中使用初始方法。

为什么element.matches的polyfill不起作用

1 个答案: