Question

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

我已经尝试了以下代码（这里是一个jsfiddle：https://jsfiddle.net/0o160f5g/2/）：

HTML：

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

CSS：

{{1}}

JS：

{{1}}

此代码应提供警告＆＃34;红色方块位于坐标＆＃34;内。然而，它提供警报＆＃34;红色方块在坐标之外＆＃34;。我该怎么做才能解决它？

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.
}

Answer 2

Document接口的elementFromPoint（）方法返回指定坐标处的最顶层元素。

你应该将它与另一个元素进行比较：

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

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

2 个答案: