<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版</title> </head> <body> <script> function mouseMove(ev) { ev= ev || window.event; var mousePos = mouseCoords(ev); //alert(ev.pageX); 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>
拖拽小案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title> <style> #div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; } #img1 { position:absolute} </style> <script> window.onload = function(){ var oDiv = document.getElementById('div1'); var oImg = document.getElementById('img1'); tqfc(oDiv); tqfc(oImg); function tqfc(obj){ obj.onmousedown = function(ev){ var ev = ev || event; var oDivX = ev.clientX - this.offsetLeft; var oDivY = ev.clientY - this.offsetTop; obj.style.backgroundColor = 'red'; //加入兼容问题 if(obj.setCapture){ obj.setCapture(); } document.onmousemove = function(ev){ //注意这里是document var ev = ev || event; L = ev.clientX - oDivX; T = ev.clientY - oDivY; //限制不超出可视范围 if(L<100){ //磁性吸附重点在于这里,原本是0,改成100 L = 0; }else if(L>document.documentElement.clientWidth - obj.offsetWidth){ L = document.documentElement.clientWidth - obj.offsetWidth; } if(T<0){ T = 0; }else if(T>document.documentElement.clientHeight - obj.offsetHeight){ T = document.documentElement.clientHeight - obj.offsetHeight; } obj.style.left = L + 'px'; obj.style.top = T + 'px'; } return false; } obj.onmouseup = function(){ document.onmousedown = document.onmousemove = null; obj.style.backgroundColor = '#7391C5'; //加入兼容问题 if( obj.releaseCapture ){ obj.releaseCapture(); } } } } </script> </head> <body> <div id="div1"></div> <img src="标签图片/1.JPG" width="100" id="img1"/> </body> </html>