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 은 msMatches Selector 방법 을 지원 하지 않 습 니 다. 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();
        }
    }

본문 참고: 소천 지, 대세 계백마