首頁手記 JavaScript中matches(matchesS...

JavaScript中matches(matchesSelector)的兼容寫法

標簽：

JavaScript

规范中，为DOM节点添加了一个方法，主要是用来判断当前DOM节点不否能完全匹配对应的CSS选择器规则；如果匹配成功，返回true，反之则返回false。语法如下：
```
 element.matches(String selector);
```

这个方法在我们做事件委托时就显得非常有用，示例代码如下：

 document.querySelector('#wrap').addEventListener('click', function (e) {     if (e.target.matches('a.btn')) {
         e.preventDefault();         //TODO something
     }
 }, false);

对应的HTML代码如下:

 <div id="wrap">
   <a class="btn" >点击代码</a>
   <span class="btn">不可点击按钮</span>
 </div>

对于以上，jq的一种写法可以如下：

 $('#wrap').delegate('a.btn', 'click', function (e) {       //TODO something
  });

实际情况下，'matches'支持情况也不太尽人意，你可以到 caniuse 查看参考结果。但几乎所有的现代浏览器实验性的实现了这个方法（如：chrome中以webkitMatchesSelector，firefox中以mozMatchesSelector，IE 9+中则以msMatchesSelector替代）。
我们知道，jq中内置了js实现的css选择器sizzle，而sizzle中也是提供了类似功能的API接口，调用如下：
```
 Sizzle.matchesSelector( DOMElement element, String selector );
```

通常在开发阶段兼容IE 8+及移动端，我更偏向于脱离jq等重量级的库。所以有了以下的兼容写法：

 function matchesSelector(element, selector) {     if (element.matches) {         return element.matches(selector);
     } else if (element.matchesSelector) {         return element.matchesSelector(selector);
     } else if (element.webkitMatchesSelector) {         return element.webkitMatchesSelector(selector);
     } else if (element.msMatchesSelector) {         return element.msMatchesSelector(selector);
     } else if (element.mozMatchesSelector) {         return element.mozMatchesSelector(selector);
     } else if (element.oMatchesSelector) {         return element.oMatchesSelector(selector);
     }
 }

但主要IE 8正好不支持msMatchesSelector方法，可以用如下方法处理以上函数，以便支持IE 8，完善之后的代码如下：

 function matchesSelector(element, selector) {     if (element.matches) {         return element.matches(selector);
     } else if (element.matchesSelector) {         return element.matchesSelector(selector);
     } else if (element.webkitMatchesSelector) {         return element.webkitMatchesSelector(selector);
     } else if (element.msMatchesSelector) {         return element.msMatchesSelector(selector);
     } else if (element.mozMatchesSelector) {         return element.mozMatchesSelector(selector);
     } else if (element.oMatchesSelector) {         return element.oMatchesSelector(selector);
     } else if (element.querySelectorAll) {         var matches = (element.document || element.ownerDocument).querySelectorAll(selector),
             i = 0; 
         while (matches[i] && matches[i] !== element) i++;         return matches[i] ? true : false;
     }     throw new Error('Your browser version is too old,please upgrade your browser');
 }