javascript - 仅使用 javascript 检查父元素是否包含特定的 CSS 类？

Question

当我单击任何 DOM 元素时，我想检查其父元素是否包含特定类。我正在尝试这种方式，但无法实现这个目标。有谁知道怎么做？

document.onclick=function(e){
    console.log(e.parentElement('.drop').id);       
}

请仅在 JavaScript 中给出解决方案 - 我不能使用 jQuery。

Answer 1

您可以使用classList父元素的属性。它有一种contains()对您的目的有用的方法：

document.onclick=function(e){
    console.log( e.parentElement.classList.contains( 'drop' ) );       
}

如果您的目标是 Internet Explorer（IE<10），您可以手动解析类列表并在其中查找“drop”：

document.onclick=function(e){
    console.log( e.parentElement.className.split(' ').indexOf('button-panel')!==-1 );
}

split()将 className 解析为数组中的多个名称。 indexOf()搜索数组中的元素，如果找不到，则返回-1

Answer 2

传递给事件处理程序的e是事件对象，而不是被点击的元素。尝试抓住srcElement，然后它是父母的className。此外，由于您不能使用 jQuery，因此像.droparound 一样传递选择器不会做任何事情，只会导致语法错误。

document.onclick = function(e){
    console.log(e.srcElement.parentNode.className);

    e.stopPropagation(); // don't bubble
};

工作示例

Answer 3

now i got the answer 

document.onclick=function(e){   
    if (!e) e = window.event;
        curDD = findparentClass(e.target.parentNode,'drop');
        console.log(curDD);
    }
}
function findparentClass(node, clsName) {           
    if(node.className != clsName && node.className!=null){
        return findparentClass(node.parentNode,clsName);                    
    }else if(node.className!=null){
        return true;    
    }
}

其中“drop”是您要搜索的类...