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对应的各种坐标的更多相关文章

  1. 鼠标事件event和坐标

    鼠标事件(e=e||window.event) event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标 ...

  2. ugui Event.current.mousePosition获取的坐标原点在左上角

    脚本里使用OnGUI(),在鼠标按下时出发EventType.MouseDown事件,此时如果观察Event.current.mousePosition的坐标原点时左上角,即鼠标按下的点越靠近左上角, ...

  3. #event.initMouseEvent

    initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值.此方法只能在通过 dispatchEvent 方法指派 MouseEvent 之前 ...

  4. Event 对象

    哪个鼠标按钮被点击? <html> <head> <script type="text/javascript"> function whichB ...

  5. js 实现的页面图片放大器以及 event中的诸多 x

    背景: 淘宝.天猫等电商网站浏览图片时可以查看大图的功能: 思路: 思路很简单,两张图片,一张较小渲染在页面上,一张较大是细节图,随鼠标事件调整它的 left & top; 需要的知识点: o ...

  6. JS事件（四）坐标位置

    1.客户区坐标位置  (相对于客户端视口,而无关浏览器缩放) clientX与clientY:表示事件发生时鼠标在视口的坐标,不包括页面滚动距离,因此不代表鼠标在页面上的位置. 2.页面坐标位置 pa ...

  7. html页面中event的常见应用

    一:获取键盘上某个按键的unicode值 <html> <head> <script type="text/javascript"> funct ...

  8. Javascript防冒泡事件与Event对象

    防冒泡 防冒泡用到的就是event的属性和方法 function add2shop(e) { if (!e) var e = window.event; e.cancelBubble = true; ...

  9. DOM中Event 对象如何使用

    DOM中Event 对象如何使用 一.总结 一句话总结: 1.将event作为参数传递进来,然后就可以调用event对象的各种属性和方法了. <body onmousedown="wh ...

随机推荐

  1. Luogu3373【模板】线段树2

    P3373[模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行 ...

  2. win7下nsis打包exe安装程序教程

    下载软件包: NSIS中文版 :https://pan.baidu.com/s/1mitSQU0 装好之后会出现两个软件:Nullsoft Install System 和 VNISEdit 编译环境 ...

  3. 统一我的博客文章的CSS样式代码

    一.前因后果 之前写博客的时候也有写一些CSS代码来美化,不过都是凌乱的,每次再写一篇,又得重头来过去想,或者去拷贝原来的CSS设置.由于逻辑性不强,找一个配套的格式出来要花费不少时间. 今天我把部分 ...

  4. 打印pid，写着玩。

    #include <stdio.h> #include <string.h> #include <dirent.h> #include <limits.h&g ...

  5. C++中的类继承(1) 三种继承方式

    继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...

  6. JavaScript Break 和 Continue 语句

    1.break:终止本层循坏,继续执行本次循坏后面的语句: 当循坏有多层时,break只会跳过一层循坏 2.continue:跳过本次循坏,继续执行下次循坏 对于for循环,continue执行后,继 ...

  7. Java集合的区别和选择

              Collection |--List       有序,可重复 |--ArrayList 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高 |--Vector 底层数据结构 ...

  8. 使用Entity Framework时遇到的问题

    1.运行程序时提示 ,vension does not match. 差不多是这样一个提示,具体怎么样的给忘记了. #1remove 'entity framework' from reference ...

  9. 自己实现的string的库函数

    为了更好地理解string的各个库函数,现将几个常用的库函数用自己的方式实现如下: #include<iostream> using namespace std; #include< ...

  10. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...