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>
event对应的各种坐标的更多相关文章
- 鼠标事件event和坐标
鼠标事件(e=e||window.event) event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标 ...
- ugui Event.current.mousePosition获取的坐标原点在左上角
脚本里使用OnGUI(),在鼠标按下时出发EventType.MouseDown事件,此时如果观察Event.current.mousePosition的坐标原点时左上角,即鼠标按下的点越靠近左上角, ...
- #event.initMouseEvent
initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值.此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前 ...
- Event 对象
哪个鼠标按钮被点击? <html> <head> <script type="text/javascript"> function whichB ...
- js 实现的页面图片放大器以及 event中的诸多 x
背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...
- JS事件(四)坐标位置
1.客户区坐标位置 (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...
- html页面中event的常见应用
一:获取键盘上某个按键的unicode值 <html> <head> <script type="text/javascript"> funct ...
- Javascript防冒泡事件与Event对象
防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...
- DOM中Event 对象如何使用
DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...
随机推荐
- Luogu3373【模板】线段树2
P3373[模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行 ...
- win7下nsis打包exe安装程序教程
下载软件包: NSIS中文版 :https://pan.baidu.com/s/1mitSQU0 装好之后会出现两个软件:Nullsoft Install System 和 VNISEdit 编译环境 ...
- 统一我的博客文章的CSS样式代码
一.前因后果 之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置.由于逻辑性不强,找一个配套的格式出来要花费不少时间. 今天我把部分 ...
- 打印pid,写着玩。
#include <stdio.h> #include <string.h> #include <dirent.h> #include <limits.h&g ...
- C++中的类继承(1) 三种继承方式
继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...
- JavaScript Break 和 Continue 语句
1.break:终止本层循坏,继续执行本次循坏后面的语句: 当循坏有多层时,break只会跳过一层循坏 2.continue:跳过本次循坏,继续执行下次循坏 对于for循环,continue执行后,继 ...
- Java集合的区别和选择
Collection |--List 有序,可重复 |--ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高 |--Vector 底层数据结构 ...
- 使用Entity Framework时遇到的问题
1.运行程序时提示 ,vension does not match. 差不多是这样一个提示,具体怎么样的给忘记了. #1remove 'entity framework' from reference ...
- 自己实现的string的库函数
为了更好地理解string的各个库函数,现将几个常用的库函数用自己的方式实现如下: #include<iostream> using namespace std; #include< ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...