• 規(guī)范中，為DOM節(jié)點添加了一個方法，主要是用來判斷當前DOM節(jié)點不否能完全匹配對應的CSS選擇器規(guī)則；如果匹配成功，返回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 查看參考結果。但幾乎所有的現(xiàn)代瀏覽器實驗性的實現(xiàn)了這個方法（如：chrome中以webkitMatchesSelector，firefox中以mozMatchesSelector，IE 9+中則以msMatchesSelector替代）。

• 我們知道，jq中內(nèi)置了js實現(xiàn)的css選擇器sizzle，而sizzle中也是提供了類似功能的API接口，調用如下：

   Sizzle.matchesSelector( DOMElement element, String selector );
  

• 通常在開發(fā)階段兼容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方法，可以用如下方法處理以上函數(shù)，以便支持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');
   }
  

• 由于querySelectorAll是SELECTORS API Level 1中提出來的，所以在瀏覽器中的表現(xiàn)的比較不錯。所以以上的解決方案可以在不考慮IE 7-以下瀏覽器的情況下使用。

原創(chuàng)文章，轉載請注明出處：小天地，大世界[https://www.lyblog.net]
文章地址：https://www.lyblog.net/detail/601.html