【收藏】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> ...
随机推荐
- java 生成随机校验码
1 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffe ...
- mybatis动态sql之foreach标签
foreach 元素的功能非常强大,它允许你指定一个集合,声明可以在元素体内使用的集合项(item)和索引(index)变量.它也允许你指定开头与结尾的字符串以及在迭代结果之间放置分隔符.这个元素是很 ...
- rancher2.1.7 +jenkins +harbor 自动容器CI系统(通过rancher命令行)
jenkins脚本执行示例: //环境定义与 cd $WORKSPACEmodule=news-usercd $module/case $deploy in deploy) //发布模块 //编译/o ...
- cacti 流量图合并
cacti 安装:https://www.cnblogs.com/weijie0717/p/4072711.html 一.需求介绍 由于交换机的多端口跑同一种流量,需要汇总统计.因此需要见多个端口的流 ...
- 20175126《Java程序设计》第九周学习总结
# 20175126 2016-2017-2 <Java程序设计>第九周学习总结 ## 教材学习内容总结 - 本周学习方式主要为手动敲代码并理解内容学习. - 学习内容为教材第十一章,本章 ...
- Ubuntu 16.04 安装的那点事
通常,Ubuntu都是与windows共存——安装成双系统的 如果在虚拟机上安装,请参照 https://blog.csdn.net/wyx100/article/details/51582617 U ...
- Linux 学习笔记 1
1. 名词解释 GNU: 目标是创建一套完全自由的操作系统:包含了可自由使用的软件,如Emacs,GCC,Tex,X Window:制定了3个自由软件协议:GPL,LGPL,GFDL GPL(Gen ...
- springmvc webservlet 加redis 订阅消息
由于项目内请求的数据需要 等待设备处理完毕后返回才能得到.请求命令返回的是发送成功的包,而不是设备处理的包,所以需要请求等待.. 方式一:项目中 添加了redis作为一个缓存, webservlet ...
- 超简单的全新win10安装
1.准备工作! 这里说一下需要装系统的东西: 至少8G的U盘或内存卡 一台Windows电脑 在要安装的电脑上至少有16G的空间,最好至少64G. 2.现成电脑下载文件(已经有重装系统U盘跳过这一步) ...
- IIS Express(7.0) HTTP 错误 500.22 - Internal Server Error(vs2013)
1.错误如下: HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设置. 解决的方法: 首先,找到本地appcmd.x ...