如何使用 JavaScript 确定鼠标指针在哪个元素上移动？

给定一个 HTML 文档，任务是获取鼠标指针移动到的元素。有两种方法可以解决这个问题，下面将讨论：

方法一：

• 使用.clientX和.clientY属性获取 x 和 y 坐标值。
• 当鼠标指针移过时，使用document.elementFromPoint(x, y)方法获取该位置的元素内容。

示例 1：此示例实现了上述方法。

 
 
  
 
     
        How to determine which element the mouse
        pointer move over using JavaScript ?
     
 
  
 
      
     
        GeeksForGeeks 
     
      
     
    
      
     
        click here 
     
      
     
    
      
     
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        up.innerHTML = "Hover over the document to know the element."; 
          
        function GFG_Fun() { 
            var x = event.clientX;
            var y = event.clientY;
            el = document.elementFromPoint(x, y);
            down.innerHTML = el.innerHTML;
        } 
     

  

输出：

• 悬停在按钮上之前：
  
• 悬停在按钮上后：
  

方法二：

• 将事件“onmouseover”附加到元素。
• 每次发生事件时，使用该元素的 id 调用警报函数。

示例 2：此示例使用上述方法。

 
 
  
 
     
 
  
 
      
    
 
        GeeksForGeeks 
    
 
      
    
 
        Hover over the document to know the element.
    
      
     
        click here 
     
 
  

输出：

• 悬停在按钮上之前：
  
• 悬停在按钮上后：