【收藏】JS获取鼠标的X,Y坐标位置
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坐标位置的更多相关文章
- js获取div相对屏幕的坐标位置
1:div相对屏幕的坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.g ...
- js点击获取—通过JS获取图片的绝对对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- 关于js获取元素在屏幕中的位置的方法
针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...
- JS获取元素尺寸大小、鼠标位置
//e.clientX|Y:表示鼠标相对浏览器可视窗口的当前坐标 //e.offsetX|Y:表示鼠标相对于事件源对象的坐标 //e.pageX|Y:表示鼠标相对于网页的坐标 /* element.o ...
- js 获取元素坐标 和鼠标点击坐标
js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); aler ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- JS获取坐标
1.js获取对象的绝对坐标 方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offset ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- linux查看Java线程
一.查看Java进程pid的方式 1. ps命令 ps -ef | grep java 2. jvm自带的 jps 工具 3. 当然还有其他命令也可以显示 netstat ,top 二.查看Java线 ...
- Day3 -4.9!受到毕设的突然袭击,一脸蒙蔽,学习暂时停止,明晚继续
PS:啊啊啊啊,慌张的不行,不详的预感终于爆发了,第二次毕设评图好突然,没办法了,竹径和学习突然搁置,明晚健身/建模/补更Day3,感到崩溃 ————————————————————————————— ...
- 从xampp到phpmyadmin
目录 xampp的安装和配置 尝试运行Example11_1(图形化管理工具的可视化界面) 参考博文 xampp的安装和配置 主要参考博文Intellj IDEA 简易教程 1.下载并安装xampp ...
- AD16 PCB重新定义板型时没有Redefine Board Shape
1.高版本的AD都没有“Redefine Board Shape” 2.在Keep-Out-Layer层,做好了板子的外形,把外形都选中后,然后快捷键D-S-D即可.
- Git多账号配置,同一电脑多个ssh-key的管理
为什么有这种需求? 在我们开发过程中,可能会遇到使用同一台机器,既要向公司git服务器提交代码,也要向gitlib或者gitee等 git仓库提交代码,2个仓库设置的用户名信息,不一样,此时需要用到多 ...
- 递归求6的阶乘(考虑int类型溢出)
编码 public class Factorial { public static void main(String[] args) { System.out.println(fac(6)); } p ...
- Anacond win10安装与介绍
Anacond的介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. 因为包含了大量的科学包,Anaconda 的下载文件比较大( ...
- 201621123002《Java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出现 ...
- Python用HTMLTestRunner生成html测试报告
小编的主机:mac 一.引入HTMLTestRunner包 1.下载HTMLTestRunner.py,已上传到网盘,点击下载 2.将HTMLTestRunner.py复制到python安装目录的Li ...
- axios封装get方法和post方法
我们常用的ajax请求方法有get.post.put等方法,相信小伙伴都不会陌生.axios对应的也有很多类似的方法,不清楚的可以看下文档.但是为了简化我们的代码,我们还是要对其进行一个简单的封装.下 ...