JS——事件详情（鼠标事件：clientX、clientY的用法）

鼠标位置

》可视区位置：clientX、clientY

跟着鼠标移动的div案例

代码以下图：

 

这个案例，运用到前一篇文章中的event事件来处理。获取div的left和top值，当鼠标移动时，div的left和top值跟着鼠标位置改变而改变。（注意的是：须要给div设置绝对定位）

演示效果以下图：

 

可是！！！

当我给body设置高度时，改变body的高度，这个案例效果就发生变化了，变得很诡异。

代码以下图：

效果图显示以下：

为何给body设置了一个2000px的高度后，这个案例就变得如此诡异呢？？？

原来，clientX和clientY解释为：鼠标的可视区坐标！！！！

 

看下面这张图，来简单解释一下：

修改代码，完成完整的案例。代码以下图：

其中的scrollTop能够参考本人的前面文章，里面有讲解scrollTop的语法和用法等　　

【跳转自：http://www.javashuo.com/article/p-yjfibzqy-co.html中的（5）document.documentElement.scrollTop(获取滚动条位置)】