为了账号安全,请及时绑定邮箱和手机立即绑定

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" href="http://www.lyblog.net">点击代码</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');
     }
  • 由于querySelectorAll是SELECTORS API Level 1中提出来的,所以在浏览器中的表现的比较不错。所以以上的解决方案可以在不考虑IE 7-以下浏览器的情况下使用。

原创文章,转载请注明出处:小天地,大世界[https://www.lyblog.net]
文章地址:https://www.lyblog.net/detail/601.html



作者:饥人谷_米弥轮
链接:https://www.jianshu.com/p/c0107679649c


点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消