JS的方法:

<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>

jquery的方法:

<div id="testDiv">放在我上面</div>
<script type="text/javascript">
$('#testDiv').mousemove(function(e) {
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$(this).text(xx + '---' + yy);
});
</script>

【收藏】JS获取鼠标的X,Y坐标位置的更多相关文章

  1. js获取div相对屏幕的坐标位置

    1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...

  2. js点击获取—通过JS获取图片的绝对对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示:  <!DOCTYPE html> <html lang="en"> <head> ...

  3. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  4. JS获取元素尺寸大小、鼠标位置

    //e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...

  5. js 获取元素坐标 和鼠标点击坐标

    js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...

  6. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  7. JS获取坐标

    1.js获取对象的绝对坐标 方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offset ...

  8. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  9. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. asp.net mvc 使用NPOI插件导出excel

    /// <summary> /// 交易账单 导出交易列表 /// </summary> /// <returns></returns> public ...

  2. Game Engine Architecture 4

    [Game Engine Architecture 4] 1.a model of multiple semi-independent flows of control simply matches ...

  3. VirtualBox 休眠恢复后无法联网解决办法

    环境:lubuntu 首先ifconfig查看网卡名,我这里是enp0s3. 接着: sudo ifconfig enp0s3 down sudo ifconfig enp0s3 up sudo dh ...

  4. midi文件格式

    百度百科的midi文件格式写的非常详细,点个赞.这里备份一下,方便日后查看. midi文件由midi头和音轨组成,midi头中的信息包括midi头标志,音轨数量,音轨的演奏方式(并行/拼接等),4分音 ...

  5. vue打开新页面

    let tempPage = window.open('_blank');//先打开一个空白页 this.$axios.post("/aliPay/aliTradePagePay" ...

  6. ARM指令集详解

    一.跳转指令 B: 跳转指令 BL: 带返回的跳转指令 BLX: 带返回和状态切换的跳转指令 BX: 带状态切换的跳转指令 二.数据处理指令 1.MOV:数据传送指令 MOV{条件}{S}    目的 ...

  7. Entity Framework连接postgresql,code first

    官方介绍地址 http://www.npgsql.org/ef6/index.html 首先创建一个控制台应用程序 ,本例居于.NETFramework,Version=v4.6.1 安装包 Enti ...

  8. WPF打印京东电子面单(可以异步)

    参考:https://www.cnblogs.com/guogangj/archive/2013/02/27/2934733.html 模板:JDFlowDocument.xaml <FlowD ...

  9. JavaScript获取扫码枪相关资料

    https://blog.csdn.net/jiongxian1/article/details/78906124 https://blog.csdn.net/jifengdalu/article/d ...

  10. Asp.net core 向Consul 注册服务

    Consul服务发现的使用方法:1. 在每台电脑上都以Client Mode的方式运行一个Consul代理, 这个代理只负责与Consul Cluster高效地交换最新注册信息(不参与Leader的选 ...