JS——事件详情（鼠标事件：clientX、clientY的用法）
2024-08-29 02:14:27
鼠标位置
》可视区位置：clientX、clientY
跟着鼠标移动的div案例
代码如下图：
这个案例，运用到前一篇文章中的event事件来处理。获取div的left和top值，当鼠标移动时，div的left和top值跟着鼠标位置改变而改变。（注意的是：需要给div设置绝对定位）
演示效果如下图：
但是！！！
当我给body设置高度时，改变body的高度，这个案例效果就发生变化了，变得很诡异。
代码如下图：
效果图显示如下：
为什么给body设置了一个2000px的高度后，这个案例就变得如此诡异呢？？？
原来，clientX和clientY解释为：鼠标的可视区坐标！！！！
看下面这张图，来简单解释一下：
修改代码，完成完整的案例。代码如下图：
其中的scrollTop可以参考本人的前面文章，里面有讲解scrollTop的语法和用法等
【跳转自：https://www.cnblogs.com/ytraister/p/10947425.html中的（5）document.documentElement.scrollTop(获取滚动条位置)】
最新文章
- NSURLCache详解和使用
- [BZOJ 1297][SCOI 2009]迷路（矩阵快速幂）
- 过滤html字符的方法
- HDU 4405：Aeroplane chess（概率DP入门）
- [Angular 2] 8. Better ES5 Code
- 【转】使用sinopia五步快速完成本地npm搭建
- Easyui设置动态表格,动态导出数据实例,附Dome
- vue-cli完整地引入element-ui
- yaf框架学习文件配置
- java集合循环删除
- python面向对象之继承/多态/封装
- [LeetCode] Rank Scores -- 数据库知识(mysql)
- 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶
- Protocol Buffer Basics: Python
- mysql安装（rpm）
- SQL中MAX()和MIN()函数的使用（比较字符串的大小）
- bzoj千题计划109：bzoj1019: [SHOI2008]汉诺塔
- centos7 卸载安装失败的mysql7
- webpack_hmr报错 cannot load 状态500
- sql1999语法