jq和js用mousemove获取鼠标当前位置

来源：互联网发布：天正建筑软件最新版编辑：程序博客网时间：2024/05/18 06:19
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jq获取鼠标的位置</title>    <style>        div{            width: 500px;            height: 500px;            background-color: #585858;            margin: 0;            padding: 0;        }    </style>    <script type="text/javascript" src="../../js/jquery-3.1.1.min.js"></script></head><body><div id="d"></div></body><script type="text/javascript">    $('#d').mousemove(function(f){       /* var xx = f.originalEvent.x|| f.originalEvent.layerX||0;        var yy = f.originalEvent.y|| f.originalEvent.layerY||0;*/        var xx = f.pageX;        var yy = f.pageY;        $(this).text(xx+','+yy);    })    /*根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下    e.pageX和e.originalEvent.x的区别（因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象）。     根据jq源码，jq版e对象下的pageX和原生的pageX是一致的，但是增加了对旧版本IE的实现部分。     于是题目可蜕化为原生e.pageX与e.x的区别，以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。     考虑jq的跨平台特性，我们在不清楚具体情况的时候，直接通过其补丁的实现方式来猜测属性的定义。     根据jq对无原生pageX的浏览器的补丁实现     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 )     - ( doc && doc.clientLeft || body && body.clientLeft || 0 );     到这里我们已经基本清楚pageX的涵义，是包含了滚动条的计算的。     实际上，e.pageX在各（支持的）浏览器下的表现都是一致的，都是表达点击位置相对于整个文档的位置，用题主的话说就是“计算了滚动条”。     兼容性来说，e.pageX除了在IE系列中低于IE9的版本中是不支持的，IE9+和其它主流浏览器全部一致支持。     可是e.x的情况很复杂……     首先，fx不支持e.x。这没啥好说的。     其次，除IE外的其它主流浏览器，opera、chrome（以及其它同内核的浏览器），都支持e.x属性,     其值为“相对可视区域的坐标”——没错，对它们来说，e.x == e.clientX。用题主的话说就是“没有计算滚动条”。     再来看看e.x属性的发明者IE。IE全系列支持e.x     被点击对象所在的坐标系（即最近一个指定position: relative的tag的左上角的border外边界为原点）的坐标位置。     如果自身及上层均没有指定position: relative属性，则蜕变为相对于“相对可视区域的坐标”。     题外话，通过F12发现，IE一旦涉及滚动条后计算居然不是整像素数，而是会出现误差小数的！*/</script></html><!--<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>javascript获得鼠标位置</title></head><body><script>function mouseMove(ev){Ev= ev || window.event;var mousePos = mouseCoords(ev);document.getElementById("xxx").value = mousePos.x;document.getElementById("yyy").value = mousePos.y;}function mouseCoords(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};}document.onmousemove = mouseMove;</script>鼠标X轴:<input id=xxx type=text>鼠标Y轴:<input id=yyy type=text></body> -->
阅读全文
0 0