<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function mousePosition(ev){//返回一个类
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
}
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);//mousePos现在为一个类
document.getElementById('txt').value=mousePos.x+":"+mousePos.y
}
document.onmousemove = mouseMove
</script>
</head>
<body>
<div>
<input id="txt"/>
</div>
</body>
</html>
注：因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500， 那么 pageY 将变成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去
分享到：
相关推荐
javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头大！如下： event.layerX event....
copy来的，但是原页面的代码还是需要修改，下面是修改可用的 常用的是 event.clientX和event.clientY分别获取横向的和纵向的位置，但仅使用这个方法是不够的，因为event.clientX和event.clientY获取的鼠标位置是相...
通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL
要想获取指针在页面中的位置，可以使用事件对象的pageX和pageY，或者是 clientX 和 clientY（兼容 IE）属性，同时还需要配合 scrollLeft 和 scrollTop 属性，这样就可以计算出鼠标指针在页面中的位
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：style.posL
如onmousemove=doMouseMove(event) 获取鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event....
本文实例为大家分享了javascript实现图片跟随鼠标移动的具体代码，供大家参考，具体内容如下 实现思路 1、给 document 绑定 mousemove 事件，获取鼠标的坐标：e.pageX ，e.pageY 2、将图片设置成绝对定位：...
2. 鼠标当前坐标 IE：event.x和event.y FF：event.pageX和event.pageY 解决办法：采用通用属性：event.clientX和event.clientY属性; 3. 鼠标坐标加上滚动条滚过的距离 IE：event.offsetX和event.offsetY FF：event
这是一款可以拖动拖拽表格来翻页，十分方便，界面也很漂亮的鼠标拖动翻页js特效代码。 function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=...
//获取鼠标的位置 var getCurrentX = getEvent.pageX; var getCurrentY = getEvent.pageY; } if(floatLayer){ floatLayer.css({top: getCurrentY - (getStartY - pageTop), left: getCurrentX - (getStartX - ...
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10 document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10 document.all.tooltip2.style.visibility=...
//鼠标移动 （获取鼠标位置） canvas.onmousemove=function(){ evt=window.event||evt; var endX=evt.pageX-this.offsetLeft; var endY=evt.pageY-this.offsetTop; //判断鼠标是否按下 if(flag){ //移动的...
通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标位置：sty
event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离) 4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能...
//获取应用实例 var app = getApp() Page({ data: { startx: 0, starty: 0, endx:0, endy:0, direction:'', numbers:[[2,2,2,2],[0,2,8,0],[0,4,0,0],[0,0,0,0]], }, tapStart: function(event){ this....
使用鼠标绘制canvase图形 function mousedownHandler (event){ if(event.button == 0 && !flag) { points.push({ x: event.pageX - cvsClientRect.x, y: event.pageY - cvsClientRect.y }); console.log...
我们先来看看如何获取光标相对于整个... //先检查非IE浏览器的位置,在检查IE的位置 return e.pageX || e.clientX + document.body.scrollLeft; } //获取光标的垂直位置 function getY(e) { //通用化事件对象 e = e || w
js鼠标拖动对象： 代码如下: //定义鼠标拖动对象 drag=function (a,o){ var d=document;if(!a)a=window.event; if(!a.pageX)a.pageX=a.clientX; if(!a.pageY)a.pageY=a.clientY; var x=a.pageX,y=a.pageY; if(o....
主要介绍了微信小程序 页面滑动事件的实例详解的相关资料,希望通过本文能帮助到大家，让大家实现这样的功能，需要的朋友可以参考下