EventTarget事件：mouseout

EventTarget事件- mouseout

mouseout当指针设备（通常是鼠标）移出已连接或关闭其子节点的元素时，会触发该事件。请注意，当您移动到子元素时，它也会在父元素上触发，因为您移出父元素的可见空间。 

基本信息

属性

示例

以下示例说明了mouseout和mouseleave事件之间的区别。

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var test = document.getElementById("test");
  
  
  // this handler will be executed only once when the cursor moves off the unordered list
  test.addEventListener("mouseleave", function( event ) {   
    // highlight the mouseleave target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
  
  
  // this handler will be executed every time the cursor is moved off a different list-item
  test.addEventListener("mouseout", function( event ) {   
    // highlight the mouseout target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

浏览器兼容性

我们将兼容性数据转换为机器可读的JSON格式。

此兼容性表仍使用旧格式，因为我们尚未转换它包含的数据。

• 电脑端

• 移动端

注释：

[1]仅适用于<textarea>元素和某些<input>元素类型。

[2]在错误218093中实现。