使用 JavaScript 将鼠标指针移动到特定位置

码农六六

已于 2022-08-24 10:58:21 修改

阅读量7.2k

点赞数 1

分类专栏： JavaScriipt学习日记文章标签： javascript 前端 html

于 2022-08-23 14:04:44 首次发布

原文链接：https://www.delftstack.com/howto/javascript/javascript-move-mouse-to-specific-position/

版权

JavaScriipt学习日记专栏收录该内容

17 篇文章 3 订阅

订阅专栏

请注意，无法将鼠标指针移动到 JavaScript 中的特定位置。主要原因是它会给用户带来安全问题并损害用户体验。

在本文中，我们将创建一个假的或自定义的鼠标指针，它可能看起来类似于默认系统的鼠标指针，然后我们将使用 JavaScript 将其位置移动到不同的位置。这种将鼠标指针移动到特定位置的技术是出于演示目的，在生产就绪的网站上应完全避免

请注意，无法将鼠标指针移动到 JavaScript 中的特定位置。主要原因是它会给用户带来安全问题并损害用户体验。

1.使用CSS样式创建一个基本的HTML结构

2.使用JavaScript将鼠标指针移动到特定位置

1.使用css样式创建一个基本的html结构

我们将在屏幕上创建两个按钮（一个在屏幕左侧，另一个在屏幕右侧），我们的目标是当我们点击第一个按钮时，鼠标指针会自动移动到屏幕上的第二个按钮上屏幕。

首先，我们在 HTML 中创建两个 HTML 元素，一个是img标签，另一个是div元素。该img标签将包含我们将用来代替原始系统鼠标光标的自定义或假光标的图像。

您可以使用来自互联网的任何鼠标光标图像。将div有两个按钮，"button 1"在"button 2"里面。

我们还将id为所有这些元素提供一个，以便我们可以在 JavaScript 中引用它们并在 CSS 中设置它们的样式。

代码片段 - HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Move mouse pointer</title>
    <style>
        * {
            cursor: none;
        }
        .block{
            display: flex;
            justify-content: space-between;
        }
        img {
            pointer-events: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <img id="cursor" src="./mouse_cursor.png" width="16" height="22" />

    <div class="block">
        <button id="btn1">Button 1</button>
        <button id="btn2">Button 2</button>
    </div>
</body>
</html>

在 CSS 内部，我们借助星号 (*) 内的 CSS 属性将原始系统的鼠标指针隐藏在整个页面中cursor: none，也称为 CSS 通用选择器。然后我们将给div元素添加一个弹性框，这样它们之间就可以有一个空间。

在img标签上，我们的自定义光标将添加pointer-events: none属性，这样就不会对其应用指针事件。

2.使用JavaScript将鼠标指针移动到特定位置

现在让我们使用 JavaScript 实现它的功能。首先，我们将使用JavaScript 中的方法获取所有元素 cursorbtn1和。btn2getElementById()

由于我们要将鼠标光标移动到特定位置，在这种情况下，在上button 2，我们首先要抓取的位置（左、上、宽、高），button 2这样当我们点击时button 1，鼠标指针会自动移动到button 2.

为此，我们将使用上的getBoundingClientRect()方法btn2，它将为我们提供一个包含各种位置和尺寸（如左、上、下、宽度、高度等）的对象，我们将把这个对象存储在一个名为的变量rect中。然后我们会计算的finalPositionX和finalPositionY，button 2所以我们可以在点击的button 2时候把鼠标指针带到的中心button 1

我们的自定义鼠标指针不会在屏幕上的这个位置移动。为了让它在浏览器上自由移动，我们必须给窗口对象添加一个事件监听器。

这个方法有两个参数，第一个是我们要执行函数的事件类型，第二个是触发该事件时将执行的函数本身。

由于我们要移动自定义鼠标指针，我们将使用mousemove事件作为我们的第一个参数，然后在我们的回调函数中，我们将获取clientX和clientY坐标，然后我们将它分配给自定义鼠标的left和位置top指针如下图。

别忘了"px"在最后加上；否则，它将无法正常工作。

代码片段 - JavaScript：

let cursor = document.getElementById("cursor");
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");

let rect = btn2.getBoundingClientRect();
let finalPositionX = rect.left + rect.width/2;
let finalPositionY = rect.top + rect.height/2;

// Moving our custom mouse pointer
window.addEventListener("mousemove", (e) => {
x = e.clientX;
y = e.clientY;

cursor.style.left = x + "px";
cursor.style.top = y + "px";
});

btn1.addEventListener("mouseup", (e) => {
cursor.style.left = finalPositionX + "px";
cursor.style.top = finalPositionY + "px";
})

在这个阶段，自定义鼠标光标将像普通鼠标光标一样移动。现在我们将自定义鼠标光标移动到特定位置。

为此，我们将在上添加一个mouseup事件btn1，然后使用和位置设置鼠标光标和left位置。topfinalPositionXfinalPositionY