javascript 获取当页面上鼠标位置
编程技术 / houtizong 发布于 3年前 71
<!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>用 javascript 获取当页面上鼠标（光标）位置 - event, window, 事件, position, 位置, mouse, 光标, 鼠标, </title></head><body> <div style="z-index::0; left:0px; top:0px;"><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//计算滚动时用下面的语句: x:ev.x + document.body.scrollLeft,// y:ev.y + document.body.scrollTop};}document.onmousemove = mouseMove;function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev);document.getElementById('mouseXPosition').value = mousePos.x;document.getElementById('mouseYPosition').value = mousePos.y;}//------------------相应单击事件-------------------------function mouseClickPosition1(click_ev){if(click_ev.pageX || click_ev.pageY){ return {x:click_ev.pageX, y:click_ev.pageY};}return { x:click_ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:click_ev.clientY + document.body.scrollTop - document.body.clientTop};}//------------定性鼠标事件----------document.onmousedown =mouseClick; var i=0;var px=0,py=0;function mouseClick(click_ev){//------------记录鼠标事件---------- click_ev = click_ev || window.event; var mousePos = mousePosition(click_ev);if(i==0){ px=mousePos.x; py=mousePos.y; $('theposition').value = mousePos.x+","+mousePos.y; }else{ var width=mousePos.x-px; var height=mousePos.y-py; $('theposition').value += ","+width+","+height;} i=i+1;i=i%2;}function $(i){ return document.getElementById(i);}</script> <div id="example_main" style="z-index:2; left:0px; top:]0px;"><fieldset><legend></legend>鼠标横坐标: <input id=mouseXPosition> 鼠标纵坐标: <input id=mouseYPosition> </fieldset> 左:上:宽:高::<input id="theposition" type="text"/></div> </div> </body></html>
上一篇：2010学习计划
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
