开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js 获取鼠标坐标

在JavaScript中获取鼠标坐标通常是通过监听鼠标事件来实现的，常见的如mousemove、mousedown、mouseup等事件。

一、基础概念

事件监听
- 在JavaScript中，可以使用addEventListener方法来为一个HTML元素添加事件监听器。例如，对于整个文档（document对象），可以添加mousemove事件监听器来获取鼠标移动时的坐标。

鼠标事件对象
- 当鼠标事件发生时，会创建一个事件对象（例如在mousemove事件中是MouseEvent类型）。这个对象包含了与鼠标事件相关的各种信息，其中就包括鼠标的坐标。

二、相关代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>获取鼠标坐标</title>
</head>

<body>
    <p id="coords"></p>
    <script>
        document.addEventListener('mousemove', function (event) {
            var x = event.clientX;
            var y = event.clientY;
            document.getElementById('coords').innerHTML = '鼠标坐标：x = ' + x + ', y = ' + y;
        });
    </script>
</body>

</html>

在上述代码中：

当鼠标在页面上移动时，mousemove事件被触发。
在事件处理函数中，event.clientX获取鼠标相对于浏览器窗口可视区域左上角的X坐标（水平方向），event.clientY获取鼠标相对于浏览器窗口可视区域左上角的Y坐标（垂直方向）。

三、优势

交互性增强
- 可以根据鼠标坐标实现很多交互效果，比如绘制图形时确定鼠标点击的位置来绘制线条、圆形等；在网页游戏开发中，可以根据鼠标坐标控制角色的移动方向或者触发特定区域的事件。

精准定位
- 能够精确知道鼠标在页面上的位置，方便进行元素的定位操作或者实现一些基于位置的动画效果。

四、应用场景

绘图工具
- 像在线的绘图板应用，需要根据鼠标坐标来确定绘制的起点、终点等位置，从而绘制出各种图形。

网页布局调整
- 一些可拖放元素布局的网页，通过获取鼠标坐标来确定元素的放置位置。
菜单交互
- 当鼠标悬停在菜单上时，可以根据鼠标坐标来显示子菜单或者调整菜单的显示样式。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js获取鼠标当前位置坐标

2017-03-01 10:08:42 在页面中获取鼠标坐标通常有三种方式，这三种方式各有不同，所的的值也是不一样的。首先是相对于页面的pageX和pageY。...它指的是鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。...这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值相对于坐标系的layerX/layerY。...FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

17.1K2 0

React技巧获取鼠标坐标位置

当鼠标指针的热点在一个元素内时，用户的鼠标被移动，mousemove事件就会在该元素上触发。...为了得到相对于页面上某个元素的鼠标坐标，我们必须从clientX减去offsetLeft，从clientY减去offsetTop。...clientX属性返回事件发生时，在应用程序视口中的水平坐标。clientY属性返回事件发生时，在应用程序视口中的垂直坐标。...监听鼠标事件第二个示例向我们展示了，为了得到全局鼠标坐标，如何在window对象上监听mousemove事件。...screenX/Y属性 screenX属性返回全局坐标中鼠标的水平坐标（偏移）。 screenY属性返回全局坐标中鼠标的垂直坐标（偏移）。

3K2 0

C#——获取鼠标当前坐标

)：将指定屏幕点的位置计算成工作区坐标（鼠标相对于窗体工作区的坐标）； this.Location：窗体左上角相对于屏左上角的坐标； System.Windows.Forms.Cursor.Position...：鼠标相对于屏左上角的坐标，等同于Control.MousePosition ?...Point类型的对象即为鼠标相对于某个控件的坐标。...现在以鼠标相对于窗体的坐标做为例子，如下：Point screenPoint = Control.MousePosition;//鼠标相对于屏幕左上角的坐标Point formPoint = this.PointToClient...); //鼠标相对于button1左上角的坐标。

4.2K4 1

获取鼠标坐标以及按键响应

当鼠标在窗口之外如何获取屏幕位置 4.源码下载地址 1.原理重写GUI类中的鼠标事件的响应函数，并实现其响应函数。要包含头文件#include 1.1效果 ?...当鼠标在窗口之外如何获取屏幕位置当鼠标移动出窗体，鼠标就无法进入mouseMoveEvent()函数，此时就需要通过其他方式获取鼠标在屏幕上的位置信息。...这里用到了这个QCursor类，这个类中有一个获取鼠标当前屏幕位置(绝对位置)的一个静态方法。...static QPoint QCursor::pos(const QScreen * screen) 我在这里的处理方式是，通过按键盘的Ctrl键，获取当前的鼠标的绝对位置，需要实现键盘的按键响应函数，...QPoint pt = QCursor::pos();//获取鼠标的绝对位置 QString str; str = QString("%1 , %2").arg(pt.x()).arg(pt.y

4.9K3 1

jquery中通过鼠标获取页面坐标

=utf-8"> jquery_shijian_function.html js...span").text("X:"+e.pageX+" , Y:"+e.pageY); }); }); 鼠标指针位于

4K5 0

jquery 获取鼠标和元素的坐标点

获取当前鼠标相对img元素的坐标 $('div').mousemove(function(e) { varpositionX=e.pageX-$(this).offset().left;...//获取当前鼠标相对div的X坐标 varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标 console.log...(positionX+' '+positionY); }) 获取当前鼠标相对浏览器的原点的坐标 $('div').mousemove(function(e) { var xx...e.originalEvent.y ||e.originalEvent.layerY || 0; console.log(xx+' '+yy); }) 获取当前鼠标相对...html页面的原点的坐标 $('div').mousemove(function(e) { var pageX=e.pageX; var pageY=e.pageY

3.1K4 1

JavaScript案例：获取鼠标在盒子内的坐标

案例分析我们在盒子内点击，想要得到鼠标距离盒子左右的距离。...首先得到鼠标在页面中的坐标（e.pageX，e.pageY）其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标...如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动时间mousemove <!...e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是...' + x + 'y坐标是' + y; })

2.1K1 0

js获取鼠标单击键

利用OnMousedown和OnContextmenu添加鼠标左中右键单击的处理,返回event.button的值来判断是单击了哪个键。...xmlns="http://www.w3.org/1999/xhtml"> 利用OnMousedown和OnContextmenu添加鼠标左中右键单击的处理...GetMouseKey(event.button); } function GetMouseKey(button) { if (button == 1) //event.button==1 鼠标左键... { alert("单击了左右键"); } if (button == 4) //鼠标中键 { alert("单击了中键"); ...:200px; height:200px; background-color:Gray;" oncontextmenu="return false" onmousedown="Click()"> 测试鼠标左键

6.2K1 0

JS如何模拟鼠标点击X,Y坐标

现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?...detailArg - 指定 Event 的鼠标单击量。...screenXArg - 指定 Event 的屏幕 x 坐标 screenYArg - 指定 Event 的屏幕 y 坐标 clientXArg - 指定 Event 的客户机 x 坐标 clientYArg...- 指定 Event 的客户机 y 坐标 ctrlKeyArg - 指定是否在 Event 期间按下 control 键。...buttonArg - 指定 Event 的鼠标按键。 relatedTargetArg - 指定 Event 的相关 EventTarget。

16.6K5 0

chart控件获取鼠标点击坐标，十字坐标跟随——c#

方法一：鼠标点击波形鼠标点击波形，显示点击位置的x，y值 private void chart1_MouseClick(object sender, MouseEventArgs e) //chart1..."; } } 调用方法： chart1.MouseClick += new MouseEventHandler(chart1_MouseClick); 方法二：鼠标移动到相应点位自动显示相关数值..., xValue, yValue); } 调用方法： chart1.MouseMove += new MouseEventHandler(chart1_MouseMove); 绘制十字坐标...1].Points.Clear(); chartVoltage.Series[2].Points.Clear(); //获取当前鼠标坐标

3.8K5 1

JS实现获取鼠标在画布中的位置

JS实现获取鼠标在画布中的位置效果展示概述本文讲解如何实现我们平时用的画布软件中，怎么获取的我们鼠标时刻在画布中的位置。.../ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置就是这么实现的 var box = document.querySelector...('.box'); // 获取盒子的元素 box.addEventListener('mousemove', function(e) { // 为盒子添加监听事件当鼠标在盒子上面的时候.../ 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标 // 我们生活中常见的画布里面的那个获取鼠标的位置就是这么实现的 var box = document.querySelector...('.box'); // 获取盒子的元素 box.addEventListener('mousemove', function(e) { // 为盒子添加监听事件当鼠标在盒子上面的时候

2.1K0 0

js获取元素相对于document的坐标

代码如下： const getOffset = el => { const { left, top } = el.getBoundingClientRe...

7.8K6 0

一招轻松获取图片中鼠标点击处坐标

通过鼠标点击获取图像的坐标值，当然也可以进一步通过坐标获取 RGB 值。...用途： 1、可用于获取 mask 区域的坐标 2、获取关键点、线坐标，便于制图等目标：假设目前我们的任务是希望获取车辆进入减速带时的速度，那么首先需要做的第一件事就是获取减速带的区域坐标。...思路官方文章：https://docs.opencv.org/master/db/d5b/tutorial_py_mouse_handling.html 通过创建一个鼠标回调函数，当鼠标事件发生时执行该函数...鼠标事件可以是任何与鼠标相关的事件，如左键向下、左键向上、左键双击等。它为我们提供了每个鼠标事件的坐标（x，y）。官方给了一些demo，用于绘制圆和矩形。...1、通过鼠标坐标的点击，即可获取坐标值 2、图片上会显示一个小点、坐标值，并在终端中显示坐标值 # coding: utf-8 import cv2 import numpy as np img =

2.9K1 0

QCustomPlot鼠标跟随显示坐标值

这里解决一个使用图表的都会碰到的问题–跟随鼠标显示值，在QCustomPlot里非常简单，可以直接看下面的效果图。

3.3K2 0

js鼠标事件

页面加载事件（onload），鼠标双击事件（ondbclick） window.onload=function(){ //绑定元素,执行对应事件鼠标双击(ondblclick...(){ alert('我是双击显示的'); } } 鼠标摁下（onmousedown）事件（摁下就执行，鼠标无需抬起...} } 鼠标抬起（onmouseup）事件（摁下后，鼠标回弹才执行） window.onload=function(){ ...鼠标移入（onmouseover）事件 window.onload=function(){ //绑定元素,执行鼠标移入事件鼠标移入(onmousemove...){ alert('鼠标移出操作'); } } PS：鼠标移动（onmousemove）和鼠标移入（onmouseover

21.1K4 0

js鼠标事件

今天遇到一个非常奇怪而又搞笑的事情：给一个a标签添加一个鼠标移动上时给一个事件，我给其添加的是一个onMouseMove事件，结果在IE6 7 8 9和GOOLE中都很正常，结果在Firox中出现问题了...鼠标的一些事件如下所示： onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4...|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.

16.1K3 0

Android MotionEvent 坐标获取

Android MotionEvent中getX()与getRawX()都是获取屏幕坐标（横），但二者又有区别 getX() ：是获取相对当前控件（View）的坐标...getRawX() ：是获取相对显示屏幕左上角的坐标演示示例代码 Java代码： public class MainActivity extends Activity implements...点击屏幕中间的Button，获取的坐标信息： ?...结果说明： x，y ：分别获取的相对Button控件的坐标 getX()， getY() rawX，rawY ：分别获取的相对显示屏幕左上角的坐标 getRawX()， getRawY() 总结...： getX() 是表示Widget相对于自身左上角的x坐标，而getRawX()是表示相对于屏幕左上角的x坐标值(注意:这个屏幕左上角是手机屏幕左上角，不管activity是否有titleBar或是否全屏幕

2.3K3 0

鼠标按键的获取

看到现在很多应用，包括做的很优秀的产品，很多居然是支持右键进行拖拽的，在页面有滚动条时，也不会随着鼠标移动的方向向上、向下去滚动滚动条。这里只是单纯的写一个兼容各浏览器的获取鼠标按按键的方法。...DOM2级事件中的event.button返回值只有三种 0 点击了左键 1 点击了中键（就是滚轮那一个键） 2 点击了右键而在M$的IE中却定义了8种 0 默认没有点击任何鼠标键 1 左键被点击...0010) 3 左右键都被点击 (0011) 4 中间被点击 (0100) 5 左键和中键被点击 (0101) 6 右键和中键被点击 (0110) 7 三个键（右、中右）同时被点击 (0111) 获取鼠标按下的按键...（只按了一个键的情况下）的方法： /** * 返回鼠标按键 * param {Object} evt 鼠标事件对象 * return {number} 0表示左键 1表示中键 2表示右键 */ function

1.4K3 0

【100个 Unity实用技能】| 游戏中获取鼠标点击的坐标，并将游戏对象移动到鼠标的点击位置

Unity 实用小技能学习游戏中获取鼠标点击的坐标，并将游戏对象移动到鼠标的点击位置作用：在游戏中实现鼠标点击的时候，获取到鼠标点的的这个坐标，并将某个游戏对象移动到这个坐标上。...;//获取到点击屏幕的屏幕坐标 Vector3 mousePositionInWorld;//将点击屏幕的屏幕坐标转换为世界坐标 private void LateUpdate()...Input.GetMouseButton(0)) { MouseFollow(); } } /// /// 获取鼠标点击坐标的方法.../// public Vector3 MouseFollow() { //获取游戏对象在世界坐标中的位置，并转换为屏幕坐标；...screenPosition = Camera.main.WorldToScreenPoint(targetPos.transform.position); //获取鼠标在场景中坐标

4.3K3 0

LabVIEW鼠标移动显示曲线坐标值

前言实现功能：将鼠标放在波形图曲线上，可以显示出横轴及纵轴的值（坐标值）。...代码思想：注册鼠标移动事件，字符串显示控件显示坐标一、后面板代码二、效果展示移动鼠标，可以看到显示的坐标值三、资源自取方式1：github链接 https://github.com/

5143 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭