js之 matches （JQ delegate closest方法）

在SELECTORS API Level
2规范中，为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);

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');
}

第二部分 替换jquery的 closest

Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

// jquery
$("selector").closest();
// js
    function closest(el,selector){
        const matchesSelector = el.matches || el.webkitMatchesSelector ||       el.mozMatchesSelector || el.msMatchesSelector;
        while (el){
            if(matchesSelector.call(el,selector)){
                return el;
            }else {
                el = el.parentElement;
            }
        }
        return null;
    }
// 使用
//弹框兼容
    onWrapTouchStart = (e) => {
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    }

本文参考：
小天地，大世界
_白马非马