Element.closest()简化事件处理程序中匹配最近的父元素

2019-05-1436次阅读javascript

Element.closest()方法用来获取:匹配特定选择器且离当前元素最近的祖先元素(也可以是当前元素本身)。如果匹配不到,则返回null。

语法

var ele = element.closest(selectors); 

参数

  • selectors 是指定的选择器,比如 "p,.wrap,p:hover, .toto + q"。
  • element 表示当前元素。

返回值

ele始终是查询到的祖先元素,查询不到就会返回null。

浏览器兼容

如果移动端使用,保守点建议也加上下面的polyfill方案。

polyfill方案兼容IE9+

部分浏览器并不支持Element.closest(),但却支持了element.matches()(或拥有私有前缀,如IE9+)。

if (!Element.prototype.matches)
    Element.prototype.matches = Element.prototype.msMatchesSelector ||
                                Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest)
    Element.prototype.closest = function(s) {
        var el = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement;
        } while (el !== null);
        return null;
    };

 

Element.closest()简化事件处理程序中匹配最近的父元素

 

<ul class="item">
      <li><span>点击我0</span></li>
      <li><span>点击我1</span></li>
      <li><span>点击我3</span></li>
</ul>

在您使用事件委托来处理"li"事件时:

document.querySelector('.item').addEventListener('click',function(event){

    var target = event.target;

    if(target.nodeName.toLowerCase() == 'li'){

      console.log(target);

      return;
      
    }

})

当点击文字时,会发现没有反应,因为您点击的是span标签,所以经常我们要做如下复杂的多次判断:

document.querySelector('.item').addEventListener('click',function(event){

    var target = event.target;

    if( target.nodeName.toLowerCase() == 'span' && target.parentNode.nodeName.toLowerCase() == 'li'){

      console.log(target.parentNode);

      return;
      
    }

    if( target.nodeName.toLowerCase() == 'li' ){

      console.log(target);

      return;

    }

})

使用Element.closest(),下面这样就可以了

document.querySelector('.item').addEventListener('click',function(event){

    var target = event.target;

    var liEle = target.closest('li');

    if( liEle ){

      console.log(liEle);

      return;
      
    }


})

 

上一篇: React生命周期方法  下一篇: css中appearance:none修改select option样式  

Element.closest()简化事件处理程序中匹配最近的父元素相关文章