我有一个在悬停时展开和缩回的菜单。问题是菜单有很多元素,要触发我的扩展功能,我需要编写如下内容。我的实际代码包含更多代码,我想知道是否有更好的方法来执行此操作。
var e = event.target
if(
e.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.className.split(" ")[0] === "main-section" ||
e.parentNode.parentNode.parentNode.className.split(" ")[0] === "main-section"){
//do somehtings}
最佳答案
在现代环境中,您可以使用 DOM 的 closest
方法:
if (e.closest(".main-section")) {
// One was found...
}
它查看当前元素以查看它是否与选择器匹配,然后是它的父元素,然后是它的父元素,等等直到树的根。它返回找到的元素,如果找不到元素,则返回 null
。
对于稍旧的环境,Element#closest
可以填充。或者如果你不喜欢 polyfilling,你可以给自己一个实用函数,而不是使用 closest
如果它存在,或者使用 matches
如果不是:
function closest(el, selector) {
if (el.closest) {
return el.closest(selector);
}
var matches = el.matches || el.matchesSelector;
while (el) {
if (matches.call(el, selector)) {
return el;
}
el = el.parentNode;
}
return null;
}
...你会像这样使用它:
if (closest(e, ".main-section")) {
// One was found...
}
关于javascript - 检查其中一个父节点是否具有特定类的优雅方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55207155/