js获取鼠标位置并控制器

在JavaScript中，获取鼠标位置并控制某个元素（比如一个跟随鼠标移动的盒子）可以通过监听mousemove事件来实现。

一、基础概念

事件监听
- 在JavaScript中，可以对HTML元素绑定各种事件监听器。对于鼠标相关的操作，mousemove事件会在鼠标在元素内移动时持续触发。

鼠标位置信息
- 当mousemove事件触发时，会传递一个事件对象（通常命名为event或者e），这个对象包含了鼠标的位置信息，如clientX和clientY属性，表示鼠标相对于浏览器可视窗口左上角的水平和垂直坐标。

二、示例代码

以下是一个简单的HTML和JavaScript代码示例，实现一个方块跟随鼠标移动：

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

<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device-width, initial - scale = 1.0">
    <title>Mouse Position Control</title>
    <style>
        #movingBox {
            width: 50px;
            height: 50px;
            background - color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="movingBox"></div>
    <script>
        const movingBox = document.getElementById('movingBox');
        document.addEventListener('mousemove', function (e) {
            const x = e.clientX;
            const y = e.clientY;
            movingBox.style.left = x + 'px';
            movingBox.style.top = y + 'px';
        });
    </script>
</body>

</html>

三、优势

交互性增强
- 可以创建更加生动、直观的用户界面，例如在一些绘图工具中，用户可以通过鼠标移动来绘制线条或者选择特定区域。

精准定位
- 能够准确获取鼠标的位置，从而实现诸如菜单在鼠标附近弹出等功能，提高用户体验。

四、应用场景

绘图应用
- 像Adobe Animate之类的在线绘图工具，鼠标位置的获取对于绘制图形、选择颜色区域等操作至关重要。

游戏开发
- 在一些基于鼠标的游戏中，例如模拟射击游戏，鼠标位置决定了射击方向等操作。
菜单交互
- 当用户将鼠标悬停在某个按钮上时，在鼠标附近弹出子菜单，这就需要获取鼠标的位置来确定子菜单的显示位置。

五、可能遇到的问题及解决方法

元素跳动或不准确
- 原因：可能是没有正确设置元素的定位属性，或者在计算位置时没有考虑到元素的尺寸等因素。
- 解决方法：确保使用position: absolute或者position: fixed（根据需求）来定位跟随鼠标的元素，并且在设置left和top属性时考虑元素的宽度和高度。例如，如果想要元素中心跟随鼠标，可以这样计算：
- 解决方法：确保使用position: absolute或者position: fixed（根据需求）来定位跟随鼠标的元素，并且在设置left和top属性时考虑元素的宽度和高度。例如，如果想要元素中心跟随鼠标，可以这样计算：

性能问题
- 原因：如果mousemove事件处理函数过于复杂，频繁触发可能会导致页面卡顿。
- 解决方法：可以对事件处理函数进行优化，例如减少不必要的DOM操作。也可以采用节流（throttle）或者防抖（debounce）技术。
- 节流示例（使用lodash库中的throttle函数，需要先引入lodash库）：
- 节流示例（使用lodash库中的throttle函数，需要先引入lodash库）：
- 防抖示例：
- 防抖示例：

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

有帮助

没帮助

如何在鼠标左键按下时获得鼠标位置，以便在web中选择和拖动文本

、

目前，我想要的效果是:选择文本，然后通过js或jquery将其拖放到网页中的某个框中，但当我选择文本并拖动时，维度值不能动态更新，所以我的问题是:当鼠标左键按下选择并拖动文本时，如何动态获取鼠标位置？

浏览 3提问于2012-01-06得票数 1

1回答

谁应该在MVC架构中分析鼠标输入

、、

我是MVC的新手，我想从一开始就做正确的事情，所以:我正在用jquery/html构建一个MVC web应用程序；我必须知道鼠标在屏幕上的位置，并根据该位置执行不同的操作。View应该接受鼠标位置，并根据它所在的位置调用控制器的不同函数，或者View应该简单地将鼠标位置发送给控制器，然后控制器选择如何处理它？在web app中有没有MVC的例子可以让我看

浏览 1提问于2012-12-28得票数 4

回答已采纳

1回答

如果在libgdx中点击了box2d body，如何注册？

、、、、

有没有一种简单的方法来判断鼠标是否点击了box2d正文？我现在正在轮询输入，但如果需要的话，我可以试着熟悉一下InputProcessor。

浏览 6提问于2018-03-25得票数 1

1回答

我可以做些什么来使我的网站上的Javascript代码与Firefox一起工作

、、、、

如果是这样，我可以使用jQuery来获取鼠标位置并将其放回Javascript中吗？顺便说一句，我完全没有使用jQuery的经验。编辑:到目前为止，我使用JS来获取鼠标位置，仅此而已。我只想要一种方法来使用jQuery来获取鼠标位置，并将其提供给我已经编写的javascript代码。如果您使用js文件和函数“ctrl+f alignIcons(e)”转到上面的链接，您会发现使用鼠标

浏览 0提问于2013-07-07得票数 0

回答已采纳

1回答

根据响应式设计获得协调

、、

我正在创建一个可以保存用户鼠标移动的插件。我想在鼠标移动的地方创建一种热图。我不知道如何以响应式的方式绘制坐标。元素的移动取决于设备的宽度。我想也许我可以在JS中创建一个函数，获取userwidth、Xcoordenate和Ycoordenate，并根据当前屏幕返回坐标。但是，我需要(通过javascript)获取哪些元素将位置从用户宽度更改为当前宽度。有可能吗？有什么建议吗？

浏览 16提问于2021-08-06得票数 0

1回答

在鼠标单击Chart.js上创建数据点

、、、、

我是Chart.js和JavaScript的新手。当前正在使用折线图，现在我想将自定义数据点添加到鼠标单击事件中(当我在数据集上的某处按下鼠标时，它将获取Y轴的当前值，并使用该值在该位置创建一个数据点)。我从获取了代码，并试图修改它。这是我当前图表的链接：我尝试使用下面的代码实现每次鼠标点击创建点

浏览 1提问于2018-03-15得票数 1

1回答

我试着用鼠标旋转我的characterController。MOUSESENSIVITY * Time.deltaTime; rotUpDown = -Input.GetAxis("Mouse Y") * MOUSESENSIVITY * Time.deltaTime; 当我移动鼠标时，它工作得很好，但是如果您不移动鼠标，那么Input.getAxis返回0，即使它已经位于屏幕的一个角落。我需要的是只有当鼠标在屏幕中央时才返回0的东西。我不知道使用Input.GetAxis是否可行，或者我应该使用另一

浏览 0提问于2019-10-02得票数 0

回答已采纳

2回答

无法在Cocos2d中获取每一帧的鼠标位置

、

我想用鼠标控制相机的旋转，就像FPS一样。要实现这一点，我需要存储每一帧的先前和当前鼠标位置，以计算每一帧的增量移动，并将其应用为旋转。文档显示获取鼠标信息的唯一方法是通过鼠标事件和事件分派器。我试过了，但它对位置没有什么用处，因为这样，当鼠标移动时，我只会刷新之前和当前的位置。如果鼠标不移动，我仍然有一些增量移动(计算N帧之前，当鼠标最后一次移动时)，相机将永远移动。有没有办法在每一帧中获得<e

浏览 2提问于2017-01-06得票数 0

1回答

JsPlumb使用AJAX重新创建画布

、、、、

问题是:选择框触发ajax并从控制器获取数据，并尝试创建jsplumb.When我更改了选择框，首先使用$("#canvas").empty();并从控制器获取数据，然后使用initJsPlumb(data); .After重新创建图表，所有节点和连接在我使用instance.getConnections()获取所有节点位置时创建correctly.But给我旧连接列表(在调用ajax之前)或我使用instance.getAllConnections

浏览 2提问于2021-03-02得票数 0

2回答

如何从原生单元格获取鼠标位置以进行rcptt测试？

、、

当我开始研究RCPTT并在NatTable上测试上下文菜单时，它需要鼠标的x&y坐标，但我想用鼠标的单元格位置而不是x&y位置来测试它。因此，我教授了如何为mose-press ecl-command的RCPTT编写带单元位置的自定义实现。为此，我需要在选择单元格后获取鼠标坐标。有没有办法在用EditCellCommand/SelectCellCommand选择/editing单元格后找到鼠标位置

浏览 9提问于2019-09-12得票数 0

2回答

如何在three.js中获取VR耳机的位置

、

我正在试图弄清楚如何在three.js中获取VR耳机的位置，我已经创建了一个场景并具有实时控制器位置，但我如何访问耳机的位置，以便知道用户的头在哪里？

浏览 2提问于2020-11-02得票数 0

1回答

从侦听器获取信息并将其传送到游戏引擎的最佳方法是什么？

、、

目前正在尝试让太空船跟随我的鼠标。我制作了一个MouseControls.js，它监听鼠标的移动并记录光标的X和Y。我应该做一个鼠标对象吗？更新:我挖掘得更深了，学到了更多，所以我想我已经缩小了我的问题。然而，随着鼠标的移动，一旦我收到"mouseMove“输入，我还需要从我的鼠标控制器获取鼠标的X和Y位置，这在游戏引擎中是不可见的(据我所知)。那么，我如何在那一刻获得这些值呢？因为您看

浏览 0提问于2017-05-22得票数 4

3回答

如何在运行时找到鼠标位置？

找到被点击的按钮的确切位置-页面上的屏幕位置- 请帮忙.？

浏览 3提问于2011-06-23得票数 1

回答已采纳

1回答

使用光线投射在触摸时移除2D对象？

、、、、

但是我读到，使用raycastign比使用OnMOuseDown方法更有效，因为raycastign方法是专门为鼠标点击设计的。

浏览 2提问于2019-02-03得票数 1

1回答

加载时悬停不起作用

、、、、

演示：2)不要移动光标，只需点击ctrl+r (页面应重新加载)嗯，一旦你取消悬停/悬停回来，你就会收到一个警告。问题是，当光标放在页面加载的红色框上时，不会触发hover事件(也不会触发mouseenter)。我知道，浏览器的工作似乎是真的，但我真的需要知道元素是否悬停，即使是在页面加载时。 function hovered(e){ e.type == 'mouseenter' ? alert('on') : alert('of

浏览 0提问于2013-03-31得票数 0

回答已采纳

1回答

为每个获取clientX的元素添加一个函数

、、、

在侦听器函数中，当鼠标移动到该元素上时，我需要它来获取和保存clientX。我遇到的问题是，它获取第一个元素的鼠标位置，并对每个其他元素保持相同的鼠标位置。我该如何解决这个问题呢？event.target.className= event.target.className.replace(' highlight', ''); } 请不要使用JS

浏览 0提问于2015-07-06得票数 0

4回答

禁止鼠标移动

、、

我需要冻结屏幕上的windows鼠标光标，使其悬停在特定的UI元素上。当鼠标处于冻结状态时，我仍然希望能够使用“假”鼠标指针与UI进行交互。目前，我有一个低级的鼠标钩子，可以阻止WM_MOUSEMOVE消息传递，有效地阻止所有真正的鼠标移动。但是，当我不传递更新的坐标时，windows实际上会在单独的WM_MOUSEMOVE消息中向我发送旧的坐标，好像是为了纠正鼠标没有移动的事实。关于如何防止Windows发送这些校正后的坐标给我，或者我如何冻结实际的鼠标curosr<

浏览 2提问于2011-02-26得票数 0

1回答

需要鼠标位置的图像/形状

、、、

因为我只是JS/Highcharts的新手，所以这个问题对许多人来说可能是最基本的。我想在鼠标位置显示一个圆圈(即当鼠标在图表上悬停时)。当我点击鼠标(mousedown)时，我希望圆圈停留在那个位置，然后圆圈不会跟随鼠标位置，而是停留在鼠标点击位置。我相信这个圆圈可以用来实现。鼠标位置可以从jQuery 获取。

浏览 2提问于2013-02-21得票数 0

回答已采纳

1回答

角平台-浏览器没有导出成员'MouseEvent‘

、、、

我正在创建一个角度2的例子，以获得鼠标的位置，并根据鼠标位置(clientX)做一些事情。它显示了编译错误：我想MouseEvent在'PlatformBrowser‘中不再可用了，还有其他方法可以获得鼠标位置吗

浏览 7提问于2017-03-18得票数 0

回答已采纳

7回答

mouseMove非常滞后

、、、

我正在尝试获得99design在将鼠标悬停在设计上时所获得的图像效果。[99designs.ca]徽标设计竞赛:运行错误需要徽标220626 我现在正在获取鼠标在mousemove上的位置，然后用它来移动我的弹出窗口图片，并且一切运行正常，但它是非常迟钝的..。要获取鼠标的位置，请执行以下操作： jQuery(document).ready(function(){ //$("#special").click(functio

浏览 157提问于2013-06-01得票数 1

点击加载更多