web前端开发

您现在的位置是:首页>前端开发

JavaScript

如何使用JavaScript将鼠标指针移到特定位置?

admin:杨小二时间:2020-06-24 16:26:58前端开发0次
在本文中,我们将学习如何使用JavaScript将鼠标指针移动到Web浏览器中的任何特定位置。在开始之前,您需要知道实际上不可能使用Javascript将鼠标指针移动到某个位置,这样的功能我们很容易被误用,但是我们可以模拟类似的东西。

在本文中,我们将学习如何使用JavaScript将鼠标指针移动到Web浏览器中的任何特定位置。在开始之前,您需要知道实际上不可能使用Javascript将鼠标指针移动到某个位置,这样的功能我们很容易被误用,但是我们可以模拟类似的东西。

在本文中,我们将学习将鼠标指针从一个指针移到另一个指针。

  • 由于我们无法使用JavaScript制作实际的鼠标指针,因此我们将图像用作光标。
  • 假设变量x,y,px,py,x1,x2 
x:实际鼠标指针的x位置
y:实际鼠标指针的y位置
x1:我们希望鼠标出现的x位置
x2:我们希望鼠标出现的y位置

现在,让
x + px = x1
px = x1-x

同样
py = y1-y

现在,px,py是x,y相对于x1,y1的相对位置。
图像光标相对于x1出现的位置, 
y1将由 
x + px和y + py
对于所有x,y
  • 现在,问题在于如何检测点击,因为鼠标光标可能不在指针上。为此,我们使用document.elementFromPoint(x + px,y + py)在其中传递图像光标的位置。这将为我们提供元素的对象,图像光标处于打开状态。获取所需的对象后,我们可以调用object.click()。

HTML代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

</head>

<body>

    <img id="cursor" src=

"https://media.geeksforgeeks.org/wp-content/uploads/20200319212118/cursor2.png"

        width="15" height="20" />

    <p>

        <button id="b1">BUTTON1</button>

    </p>

    <p>

        <button id="b2">BUTTON2</button>

    </p>

</body>

</html>                    

CSS代码:

<style>

    img {

        pointer-events: none;

        /* doing this makes sure .elementFromPoint 

        do not accquires theimage cursor object */

        position: absolute;

    }

    /* makes the cursor invisible */

    * {

        cursor: none;

    }

</style>

JavaScript代码:

<script>

    var x, y;

    var px, py;

    px = py = 0;

      

    // Image of cursor

    var cursor = document.getElementById("cursor"); 

          

    // Button 1

    var b1 = document.getElementById("b1");

          

    // Button 2

    var b2 = document.getElementById("b2");

  

    /* mutex is used to avoid multiple click event from

    firing at the same time due to different position

    of image cursor and actual cursor 

    Using mutex avoid any conflicts if original cursor and

    image cursor are both on a clickable element

    This makes sure only 1 click event is triggered at a time*/   

    var mutex = false;

    /*

    The following event is selecting the element

    on the image cursor and fires click() on it.

    The following event is triggered only when mouse is pressed.

    */

    window.addEventListener("mouseup", function(e) {  

    // gets the object on image cursor position

    var tmp = document.elementFromPoint(x + px, y + py); 

    mutex = true;

    tmp.click();

    cursor.style.left = (px + x) + "px";

    cursor.style.top = (py + y) + "px";

    })

    /* The following event listener moves the image pointer 

    with respect to the actual mouse cursor

    The function is triggered every time mouse is moved */

    window.addEventListener("mousemove", function(e) {

    // Gets the x,y position of the mouse cursor

        x = e.clientX;

            y = e.clientY;

            // sets the image cursor to new relative position

            cursor.style.left = (px + x) + "px";

            cursor.style.top = (py + y) + "px";

        });

        /* The following function re-calculates px,py 

        with respect to new position

        Clicking on b1 moves the pointer to b2

        Clicking on b2 moves the pointer to b1 */

        b1.onclick = function() {

            if (mutex) {

                mutex = false;

                px = b2.offsetLeft - x;

                py = b2.offsetTop - y;

            }

        }

        b2.onclick = function() {

            if (mutex) {

                mutex = false;

                px = b1.offsetLeft - x;

                py = b1.offsetTop - y;

            }

        }

</script>

最终解决方案:在本文中,我们将把以上所有部分合并为一个并执行任务。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        img {

            pointer-events: none;

            /* doing this makes sure .elementFromPoint 

               do not accquires theimage cursor object */

            position: absolute;

        }

        /* makes the cursor invisible */

        * {

            cursor: none;

        }

    </style>

</head>

<body>

    <img id="cursor" src=

"https://media.geeksforgeeks.org/wp-content/uploads/20200319212118/cursor2.png" 

         width="15" height="20" />

    <p>

        <button id="b1">BUTTON1</button>

    </p>

    <p>

        <button id="b2">BUTTON2</button>

    </p>

    <script>

        var x, y;

        var px, py;

        px = py = 0;

        // Image of cursor

        var cursor = document.getElementById("cursor"); 

          

        // Button 1

        var b1 = document.getElementById("b1");

          

        // Button 2

        var b2 = document.getElementById("b2");

        /* mutex is used to avoid multiple click event from

           firing at the same time due to different position

           of image cursor and actual cursor 

           Using mutex avoid any conflicts if original cursor and

           image cursor are both on a clickable element

           This makes sure only 1 click event is triggered at a time*/      

        var mutex = false;

        /*

         The following event is selecting the element

         on the image cursor and fires click() on it.

         The following event is triggered only when mouse is pressed.

         */

        window.addEventListener("mouseup", function(e) {

            // gets the object on image cursor position

            var tmp = document.elementFromPoint(x + px, y + py); 

            mutex = true;

            tmp.click();

            cursor.style.left = (px + x) + "px";

            cursor.style.top = (py + y) + "px";

        })

        /* The following event listener moves the image pointer 

         with respect to the actual mouse cursor

         The function is triggered every time mouse is moved */

        window.addEventListener("mousemove", function(e) {

            // Gets the x,y position of the mouse cursor

            x = e.clientX;

            y = e.clientY;

            // sets the image cursor to new relative position

            cursor.style.left = (px + x) + "px";

            cursor.style.top = (py + y) + "px";

        });

        /* The following function re-calculates px,py 

           with respect to new position

           Clicking on b1 moves the pointer to b2

           Clicking on b2 moves the pointer to b1 */

        b1.onclick = function() {

            if (mutex) {

                mutex = false;

                px = b2.offsetLeft - x;

                py = b2.offsetTop - y;

            }

        }

        b2.onclick = function() {

            if (mutex) {

                mutex = false;

                px = b1.offsetLeft - x;

                py = b1.offsetTop - y;

            }

        }

    </script>

</body>

</html>

 

最终效果输出:

平面设计