HTML | DOM 鼠标事件

鼠标与 HTML 文档交互时发生的事件属于MouseEvent属性的类别。

事件类型：

• onclick：当用户点击一个元素时发生该事件。
• onmousedown：当按钮按下元素时发生该事件。
• onmouseenter：当指针移动到元素上时发生该事件。
• onmouseout：当用户将鼠标指针移出元素或其子元素之一时，会发生该事件。
• onmouseup：当用户在元素上释放鼠标按钮时发生该事件。
• oncontextmenu：在元素上单击鼠标右键时会发生此事件。
• ondblclick：双击元素时发生此事件。
• onmouseleave：当指针移出元素时。
• onmousemove：当指针移动到元素上时发生此事件。
• onmouseover：当指针移动到元素或其子元素上时，会发生此事件。

句法：

• onmouseup 属性：

• onmousedown 属性：

• 点击属性：

• oncontextmenu 属性：

• ondblclick 属性：

• onmouseenter 属性：

• 鼠标离开属性：

• onmousemove 属性：

• onmouseout 属性：

• 鼠标悬停属性：

示例 1：下面的程序说明了onmousedown和onmouseup属性。

  

  
  
  GEEKS FOR GEEKS
    
        . The mouseDown() function works when the mouse button 
           is pressed down over this paragraph and sets the color of the text to 'Yellow'. 
          The mouseUp() function works when the mouse button is 
            released and sets the color of the text to 'Red'.
    
  
    
        function onmouseDown() {
            
            //  using onmousedown property
            document.getElementById("myP").style.color = "yellow"; 
        }
  
        function mouseUp() {
          
            //  using onmouseup property
            document.getElementById("myP").style.color = "red"; 
        }
    
      
  

  

输出：
最初的：

鼠标按下：

鼠标向上：

支持的浏览器：

• 谷歌浏览器
• 火狐浏览器
• 边缘
• 歌剧
• 苹果浏览器