1. 犀牛前端部落首页
  2. JavaScript百科

js判断是否是子元素

文本俺将跟大家介绍,如何判断一个当前点击的元素,是否是指定元素的子元素。

js判断是否是子元素

解决思路:

俺给父元素指定了一个id,并使用这个循环检查当前元素是否属于它的子元素。

实现代码:

/**
* 犀牛前端部落
* https://www.pipipi.net/
*/


const isDescendant = (el, parentId) => {
  let isChild = false

  if (el.id === parentId) { //判断是否是其本身
    isChild = true
  }

  while (el = el.parentNode) {
    if (el.id == parentId) {
      isChild = true
    }
  }
  
  return isChild
}

document.addEventListener('click', event => {
  const parentId = 'mycontainer'

  if (isDescendant(event.target, parentId)) {
    //处理是子元素的情况
  } else {
    //处理不是子元素的情况
  }
})

在while循环中,俺使用赋值运算符=进行迭代,直到不再有父节点,在本例中为el.parentNode返回null时, while循环结束。

该解决思路,是常见的解决办法,大家可以拿小本本记好了~类似于不停向上找。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3103.html

发表评论

登录后才能评论