event对应的各种坐标

IE8不支持的PageXY 相对于整个页面鼠标的位置包括溢出的部分

event.pageX;

event.pageY;

所有浏览器支持的：相对于当前浏览器窗口可视区域的坐标
event.clientX;
event.clientY;

相对于当前屏幕（和浏览器窗口大小无关）的坐标
event.screenX;
event.screenY;

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload = function(){document.onmousemove = function(event){var event = event||window.event;var oDiv = document.getElementById("div1");function byName(name){return document.getElementsByName(name)[0]}byName("pageX").value = event.pageX;byName("pageY").value = event.pageY;byName("clientX").value = event.clientX;byName("clientY").value = event.clientY;byName("screenX").value = event.screenX;byName("screenY").value = event.screenY;byName("scrollLeft").value = document.body.scrollLeft||document.documentElement.scrollLeft;byName("scrollTop").value = document.body.scrollTop||document.documentElement.scrollTop;//为了兼容IE8 所以才用下面的方法oDiv.style.top =event.clientY+(document.body.scrollTop||document.documentElement.scrollTop)+"px";oDiv.style.left =event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft)+"px";//oDiv.style.top =event.pageY+"px";//oDiv.style.left = event.pageX+"px";
}}</script></head>
<body style=" height: 2000px;"><div style="position:fixed;top:0;left:0;">pageX:<input type="text" name="pageX" />相对页面IE8以及更早版本不支持<br>
pageY:<input type="text" name="pageY" /><br>
clientX:<input type="text" name="clientX" />相对于网页的可视区域<br>
clientY:<input type="text" name="clientY" /><br>
screenX:<input type="text" name="screenX" />相对于屏幕，和浏览器窗口大小无关！<br>
screenY:<input type="text" name="screenY" /><br>
scrollTop:<input type="text" name="scrollTop" /><br>
scrollLef:<input type="text" name="scrollLeft" /><br>
</div><div id="div1" style="position:absolute; left:0;top:0; width:100px; height:100px; background:red;">1</div>
</body>
</html>

转载于:https://www.cnblogs.com/websir/p/4396166.html

event对应的各种坐标相关推荐

【浏览器】event.pageX/Y页面坐标(CSS像素) event.clientX/Y视口Viewport坐标(CSS像素) event.screenX/Y屏幕坐标(屏幕像素)
pageX/Y gives the coordinates relative to the <html> element in CSS pixels. clientX/Y gives th ...
js中event事件对象
1. event事件概念: Event 对象代表事件的状态,当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如事件在其中发生的元素.键盘按键的状态.鼠标的位 ...
ThreeJS 屏幕坐标与世界坐标互转
文章目录屏幕坐标系和标准设备坐标屏幕坐标转世界坐标世界坐标转屏幕坐标要理解坐标系间的转换过程,需要提前了解: ThreeJS 中的几种坐标系屏幕坐标系和标准设备坐标系不想看链接中的 ...
JS(JavaScript）的深入了解1（更新中···）
面向对象 1.单列模式 2.工厂模式 3.构造函数 (1) 类Js天生自带的类Object 基类Function Array Number Math Boolean Date Regexp Strin ...
android控件跟随手势滑动改变位置
要求: 1.通过手指移动来拖动图片 2.控制图片不能超出屏幕显示区域技术点: 1.MotionEvent处理 2.对View进行动态定位(layout) activity_main.xml: & ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
python连连看_python tkinter实现连连看游戏
需要自己添加图片素材呦运行效果: 完整代码 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-10-02 15:19:24 # ...
原生javascript
JavaScript是一种基于对象和事件驱动的客户端脚本语言组成: ECMAScript---------------标准语法 Bom(browser Object Model) Dom(docum ...
h5+js视频播放器控件
由于h5兼容性问题,很多浏览器对于插入视频播放的支持都大不相同.火狐支持的比较完整,谷歌则支持的不是很好,很多功能都不能实现,这就需要我们去自制一个播放界面,去兼容不同的浏览器. 只插入一个视频时,浏 ...

event对应的各种坐标

event对应的各种坐标相关推荐

最新文章

热门文章