测试：offsetX|Y获取鼠标坐标值

马黑黑

马黑黑

鼠标单击帖子父框任何区域，小球会跟过去，小球的圆心坐标应该是鼠标点击的地方。

offsetX 和 offsetY获得的值是相对于目标元素（单击或移动的对象）而言，例如本例，鼠标单击事件是 #papa 对应的HTML元素：

papa.onclick = function(event) {
        let xx = event.offsetX;
        let yy = event.offsetY;
        moveEle(ball, xx, yy);
}

就是说，只有单击 papa 元素时 offsetX|Y 有效，单击其外的元素无效，单击其内的元素得不到所需的值（例如单击小球）。

offsetX|Y 过去 Firefox 不支持，但它有一个 layerX|Y 可用、需要一个前提——被单击的元素使用了绝对定位。不过新版本的 Firefox 浏览器已经完美支持 offsetX|Y 。

马黑黑

这个有啥用呢？用处可大了去，本例命令小球到鼠标单击处就是一个用处，可以从中举一反三，去实现自己所需的功能和效果。

红影

单击小球内部，会让小球直接回到初始位置

红影

我记得还有个帖子，是能判断单击是在小球的左侧还是右侧，从而让小球转向。

加林森

这个小球出不了这个框的。

马黑黑

加林森 发表于 2022-8-10 17:28
这个小球出不了这个框的。

对，不让它出框外的

马黑黑

红影 发表于 2022-8-10 15:48
单击小球内部，会让小球直接回到初始位置

在这里是这样，没有做相应处理

马黑黑

红影 发表于 2022-8-10 15:50
我记得还有个帖子，是能判断单击是在小球的左侧还是右侧，从而让小球转向。

对。但这里，仅测试一下 offsetX 和 offsetY，不做别的处理方法

加林森

马黑黑 发表于 2022-8-10 18:15
对，不让它出框外的

嗯嗯。明白的。

马黑黑

加林森 发表于 2022-8-10 18:38
嗯嗯。明白的。

这个就是专门获取帖子内部的鼠标单击位置

加林森

马黑黑 发表于 2022-8-10 18:39
这个就是专门获取帖子内部的鼠标单击位置

哦，是这样的啊。

小辣椒

和swf鼠标跟随效果差不多？

红影

马黑黑 发表于 2022-8-10 18:16
在这里是这样，没有做相应处理

这样也挺好的。

红影

马黑黑 发表于 2022-8-10 18:16
对。但这里，仅测试一下 offsetX 和 offsetY，不做别的处理方法

嗯嗯，很有趣的制作

马黑黑

红影 发表于 2022-8-10 21:24
嗯嗯，很有趣的制作

目的是测试

马黑黑

红影 发表于 2022-8-10 21:24
这样也挺好的。

仅仅为了测试，所以不做别的处理

马黑黑

小辣椒 发表于 2022-8-10 21:16
和swf鼠标跟随效果差不多？

原理一样。所以，h5的出现，是导致swf的消亡的外因之一

红影

马黑黑 发表于 2022-8-10 21:54
仅仅为了测试，所以不做别的处理

嗯嗯，效果体现了。

马黑黑

红影 发表于 2022-8-11 21:24
嗯嗯，效果体现了。

对的