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

📅  最后修改于: 2021-08-30 10:07:49             🧑  作者: Mango

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

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

  • 由于我们无法使用 JavaScript 制作实际的鼠标指针,因此我们使用图像作为光标。
  • 假设变量 x, y, px, py, x1, x2
    x: x-position of the actual mouse pointer
    y: y-position of the actual mouse pointer
    x1: x-position where we want the mouse to appear
    x2: y-position where we want the mouse to appear
    
    Now, let
    x + px = x1
    px = x1 - x
    
    similarly,
    py = y1 - y
    
    Now, px, py is the relative position of x, y with respect to x1, y1.
    The position where our image cursor will appear with respect to x1, 
    y1 will be given by 
    x + px and y + py
    for all x, y
  • 现在,问题是如何检测点击,因为鼠标光标可能不在指针上。为此,我们使用 document.elementFromPoint(x+px, y+py) 在其中传递图像光标的位置。这将为我们提供元素的对象,图像光标已打开。获取到需要的对象后,我们就可以调用object.click()了。

例子:

  • HTML代码:
    
    
      
    
        
    
      
    
        
      
        

                 

           

                 

                                 
  • CSS 代码:
    
    
  • JavaScript 代码:
    
    

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


  

  

    
    
    

  

    
  
    

             

       

             

             

输出: