文档章节

在不发生滚动情况下参考目标不同而获取光标位置

学霸猫
 学霸猫
发布于 2016/06/13 23:22
字数 174
阅读 1
收藏 0

1、参照屏幕左上角:e.screenX  e.screenY

2、参照文档显示区的左上角:e.clientX||e.x   e.clientY||e.y

3、参照页面左上角:e.pageX  e.pageY  IE9+

4、参照当前元素左上角:e.offsetX  e.offsetY

上演示代码

<div id="d1"></div>
<script type="text/javascript">
	var div=document.getElementById('d1');
	div.onmouseover=function(e){
		var e=e||window.event;
		console.log(e.screenX,e.screenY);
		console.log(e.clientX,e.y);
		console.log(e.pageX,e.pageY);
		console.log(e.offsetX,e.offsetY);
	}
</script>

上图细说

screen就是相对于整个屏幕而不是浏览器

文档显示区和页面page的值获得的相同,应该都是相对于白色部分的左上角,没有标题栏

当前元素这个最好理解

© 著作权归作者所有

共有 人打赏支持
学霸猫
粉丝 4
博文 88
码字总数 36427
作品 0
深圳
程序员
私信 提问
watch-other-window.el 更加贴心的窗口滚动函数

我写代码的习惯是, 经常分成上下两个窗口, 用于对比不同文件的内容, 甚至相同文件的上下不同位置的内容. 不知道 Emacs 从什么版本开始, scroll-other-window 的默认行为变得讨厌了, 当你对一...

ManateeLazyCat
2018/09/12
0
0
Intellij IDEA快捷键介绍

|快捷键|介绍||:---------|:---------||Ctrl + F|在当前文件进行文本查找 ||Ctrl + R|在当前文件进行文本替换 ||Ctrl + Z|撤销 ||Ctrl + Y|删除光标所在行 或 删除选中的行 ||Ctrl + X|剪切光...

FuYung
2016/04/23
132
0
第三章 1 手写笔和触摸屏

Windows CE设备并不总是有鼠标的。作为替代,许多Windows CE设备都有触摸屏和手写笔。 鼠标消息 鼠标光标无论在什么时候移过屏幕,光标下的最顶层窗口都会收到一个WMMOUSEMOVE消息。如果用户...

技术小胖子
2017/11/07
0
0
Android Studio 使用艺术 - 快捷键完整版

Ctrl 快捷键 介绍 Ctrl + F 在当前文件进行文本查找 (必备) Ctrl + R 在当前文件进行文本替换 (必备) Ctrl + Z 撤销 (必备) Ctrl + Y 删除光标所在行 或 删除选中的行 (必备) Ctrl +...

quanke_
2016/09/20
655
3
IntelliJ IDEA快捷键大全

Ctrl Ctrl + F 在当前文件进行文本查找 (必备) Ctrl + R 在当前文件进行文本替换 (必备) Ctrl + Z 撤销 (必备) Ctrl + Y 删除光标所在行 或 删除选中的行 (必备) Ctrl + X 剪切光标所...

留给明天
2016/11/03
224
0

没有更多内容

加载失败,请刷新页面

加载更多

echarts实现中国地图

最近项目中有个需求:在地图上展示各省市的数据分布,像这样: 项目中接入的图表展示工具是echart,查了echart官网,发现并没有中国地图相关的实现,唯一接近的,只有香港18区人口密度。没办...

Funcy1122
21分钟前
0
0
持续集成工具Jenkins结合SVN的安装和使用

持续集成工具Jenkins结合SVN的安装和使用 2018年06月08日 11:30:23 止步前行 阅读数:2932 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zxd1435513775/ar...

linjin200
28分钟前
0
0
ES6 对象的解构赋值

基本用法 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何...

Jack088
30分钟前
2
0
微信小程序富文本table超出宽度处理

一、微信小程序富文本table超出宽度处理 处理思路: 使用正则删除table中的width属性。 //去除table的宽度content = content.replace(/<table[^>]*>/gi, function (match, capture) { ...

tianma3798
32分钟前
0
0
阿里云全站加速DCDN全面支持WebSocket协议

WebSocket协议可以为网站和应用提供真正的双向通信,具有控制开销、保持连接状态、更强实时性、更好的压缩效果等优点,是当下低延时应用最常采用的一种技术协议。为了更好的满足客户在实时通...

阿里云官方博客
33分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部