Jquery"；无法读取属性'；id'；“无效”的定义；跟踪事件时。pageX+；Y

我在创建跟踪用户鼠标指针并在单击时与div元素交互的web applet时遇到问题

在我在小程序上方添加一个新部分之前工作正常。当我尝试单击应用程序部分中的任何内容时，我得到的任何目标div：

未捕获的TypeError:无法读取null demo.js:27的属性“id”

（匿名函数）demo.js:27

x、 event.dispatch jquery.min.js:5

v、 handlejquery.min.js:5

当我从页面顶部删除新的部分时，一切正常

此小提琴会重新创建错误，但它会在添加或不添加附加部分的情况下执行此操作。这也很奇怪

代码：

$（文档）.ready（函数（）{
$（“#phone”）.css（'display'，'none'）；
$（“#外部”）.mouseenter（函数（）{
$（“#phone”）.fadeIn（'fast'，0）；
});
$（“#外部”）.mousemove（函数（事件）{
var parentOffset=$（“#外部”）.offset（）；
var relX=event.pageX-parentOffset.left；
var relen=event.pageY-parentOffset.top；
var phone=$（“#phone”）；
relX=relX-（phone.width（）/2）；
依赖=依赖-（phone.height（）/2）；
css（“左”，relX+“px”）；
css（“top”，relY+“px”）；
});
$（“#电话”）。单击（功能（事件）{
var phone=$（“#phone”）；
css（'display'，'none'）；
var elem=document.elementFromPoint（event.pageX，event.pageY）；
console.log（'单击：'+元素id）；
css（'display'，'block'）；
});
$（“#外部”）.mouseleave（函数（）{
$（“#phone”）.fadeOut（'fast'，0）；
});
});
#顶部背景{
位置：相对位置；
宽度：100%；
高度：700px；
背景：中心不重复；
背景色：#000000；
溢出：隐藏；
}
#顶部背景。着陆文本{
宽度：380px；
位置：绝对位置；
最高：30%；
右：15%；
}
#外{
位置：相对位置；
宽度：100%；
高度：700px；
背景：中心不重复；
背景色：#eff0f2；
溢出：隐藏；
}
#事情1{
左：50%；
顶部：112px；
左边距：280px；
位置：绝对位置；
宽度：125px；
高度：150像素；
背景颜色：绿色；
}
#事情2{
左：50%；
顶部：265px；
左边距：195px；
位置：绝对位置；
宽度：120px；
高度：140像素；
背景颜色：蓝色；
}
#事情3{
左：50%；
顶部：410像素；
左边距：35px；
位置：绝对位置；
宽度：252px；
高度：85px；
背景颜色：黄色；
}
#事情4{
左：50%；
顶部：475px；
左边距：220px；
位置：绝对位置；
宽度：155px；
高度：150像素；
背景色：红色；
}
#事情5{
右：50%；
顶部：400px；
右边距：20px；
位置：绝对位置；
宽度：110px；
身高：205px；
背景色：青色；
}
#事情6{
右：50%；
顶部：400px；
右边距：140px；
位置：绝对位置；
宽度：112px；
身高：205px；
背景颜色：灰色；
}
#事情7{
右：50%；
顶部：400px；
右边距：270px；
位置：绝对位置；
宽度：112px；
身高：205px；
背景颜色：紫色；
}
#事情8{
右：50%；
顶部：397px；
右边距：400px；
位置：绝对位置；
宽度：112px；
高度：208px；
背景颜色：粉红色；
}
#电话{
位置：相对位置；
宽度：170px；
身高：381px；
背景色：#2858b9；
不透明度：1；
光标：十字线；
背景大小：100%；
z指数：1000；
}

使纸复活
使用ori的交互式打印
事情1
事情2
事情3
事情4
事情5
事情6
事情7
事情8
对以下内容进行了一些更改：


指针事件：无#phone
上进行编码，这样当您单击时，它会通过
#phone
到达它后面的元素

$（“#outer>div”）。单击（）
，因此只有单击
#对象才能生效。（
#手机
包含在选择器中，但如上所述，它无法接收
单击
s。）

var elem=this。让浏览器完成繁重的工作，并找出您单击的内容。不需要
元素frompoint（）

document.elementFromPoint（）
正在返回
null
。是否有任何原因使您在整个页面中跟踪位置，而不仅仅是在某些元素的鼠标上方/鼠标外？尝试用
事件.target
替换
document.elementFromPoint（）
@Jhecht如何仅在关键元素中跟踪鼠标？？使用jquery，它相当容易。如果我可以假设您要跟踪鼠标的每个项目都有一个“mouse”类，那么在jquery中：
$（'.mouse'）.on（'mouseover，function（）{…}）。on（'mouseout'，function（）{…}）
，用您需要的代码替换
function（）{…}
。