javascript - 使用 document.elementFromPoint 检查特定坐标处的元素是否具有特定类

Question

我有坐标。我想检查这些坐标处是否存在具有特定类的元素。我该怎么做？

我尝试了以下代码(这是一个jsfiddle:https://jsfiddle.net/0o160f5g/2/):

HTML:

<div class="foo"></div>

CSS:

.foo{
    width: 100px;
    height: 100px;
    background-color: red;
}

JS:

if(document.elementFromPoint(30, 30) == ".foo"){
    alert("The red square is within the coordinates")
}else{
    alert("The red square is outside the coordinates")
}

此代码应发出警报“红色方 block 在坐标内”。但是它会发出警报“红色方 block 位于坐标之外”。我可以做什么来修复它？

Answer 1

elementFromPoint返回 Element对象(或 null)，而不是 css 选择器。因此，您将测试该元素的各种属性以查看它是否匹配

//checks class
document.elementFromPoint(30,30).classList.contains('foo')
//checks id
document.elementFromPoint(30,30).id == 'foo'
//test for null first so not to get type errors 
var eleAtPoint = document.elementFromPoint(30,30);
if(eleAtPoint && eleAtPoint.classList.contains("foo")){
   //do something.
}

或者，如果您已经有了一个元素，请将已有的引用与 elementFromPoint 的结果进行比较

var elementToCheck = document.querySelector('.foo');

if(document.elementFromPoint(30,30) === elementToCheck){
  //do something.
}