最全的获取鼠标坐标的方法

今天给朋友们分享js获取鼠标坐标的最全方法集合：

HTML、CSS与JS代码如下：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}
.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}
.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}
</style>
</head>  <body style="height:1600px;">
<div class="main">  <div class="box" id="box"></div>
</div>  <script>
var oBox = document.getElementById('box');
window.onload = function(){  oBox.onmousedown = function(ev){  ev = ev || window.event;           console.log(ev.offsetX, ev.offsetY);  console.log(ev.clientX, ev.clientY);  console.log(ev.pageX, ev.pageY);  console.log(ev.screenX, ev.screenY);  console.log(ev.layerX, ev.layerY);  console.log(ev.x, ev.y);  }
}
</script>
</body>
</html>

浏览器对这些属性的支持情况：

event.pageX与event.pageY有兼容问题，IE9之前不支持使用，如果IE9之前浏览器要获取光标在文档中的坐标，则使用光标在视口中的坐标 + 滚动距离
event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

它们对应获取的距离是哪里：

event.layerX,event.layerY:

event.x,event.y:

最全的获取鼠标坐标的方法相关推荐

Windows下C/C++模拟鼠标点击，PC端没有鼠标设备也能够获取鼠标坐标、移动鼠标坐标、模拟鼠标点击事件，方法一亲测有效
------- [ 转载请保留 ] ------- 作者:西_瓜_瓜博客:https://blog.csdn.net/xi_gua_gua/article/details/105773298 --- ...
c语言获得鼠标点击坐标方法,C语言怎样获取鼠标坐标？
想要获取鼠标坐标并不那女,还是一样需要调用两个API函数GetCursorPos() 获取鼠标指针位置(屏幕坐标)然后采用ScreenToClient() 将鼠标指针位置转换为窗口坐标输出即可.上例子 ...
php控制鼠标,HTML_用VBS控制鼠标的实现代码（获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击），怎么用VBS模拟鼠标左键单击、 - phpStudy...
用VBS控制鼠标的实现代码(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) 怎么用VBS模拟鼠标左键单击.左键双击.右键单击?-- 网上搜到的答案普遍是VBS无法实现,或者是要用第三方COM( ...
C++获取鼠标坐标并移动鼠标
原文章地址: C++获取鼠标坐标并移动鼠标公司电脑强制设定10分钟无鼠标键盘输入便锁屏,锁屏之后要重新输入密码太麻烦.代码自动检测过去4.9分钟内鼠标是否发生了移动,如果没有发生移动则移动鼠标位置. ...
基于JQuery实现鼠标滑过（类似hover）图片（或Canvas），实时获取鼠标坐标位置
前言: 尝试制作web端物体标注的时候,虽然利用Canvas可以标注物体,但缺少像LabelImg那样可以利用十字星定位鼠标起点的辅助功能.一直认为可以通过鼠标hover事件实时获取鼠标位置,尝试后无 ...
JS实时获取鼠标坐标
简单练习,先上图非常简单,只是一个onmousemove事件的处理 <!DOCTYPE html> <html lang="en"> <head&g ...
openlayers学习——10、openlayers监听获取鼠标坐标位置
openlayers监听获取鼠标坐标位置前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法.本人不是专业GIS开发,只是记录,方便后续查找. 参考资料: openlaye ...
vue 点击获取鼠标坐标（鼠标位置）
<button @click="getMouseXY($event)">点击获取鼠标坐标</button> getMouseXY(e){this.x = e ...
android之View坐标系（view获取自身坐标的方法和点击事件中坐标的获取）
在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...

最全的获取鼠标坐标的方法

最全的获取鼠标坐标的方法相关推荐

最新文章

热门文章