EventTarget事件:mouseout

EventTarget事件- mouseout

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

基本信息

规范DOM L3 
接口MouseEvent
是否冒泡
是否可取消
目标Element
默认操作没有

属性

属性类型描述
target(只读)EventTarget事件目标(DOM树中最顶层的目标)。
type(只读)DOMString事件的类型。
bubbles(只读)Boolean
事件是否正常冒泡
cancelable(只读)Boolean事件是否可以取消
view(只读)WindowProxydocument.defaultViewwindow文件)
detail(只读)longfloat0。
currentTarget(只读)EventTarget附加了事件监听器的节​​点。
relatedTarget(只读)EventTarget对于mouseovermouseoutmouseentermouseleave事件:互补事件的目标(在mouseenter事件的情况下为mouseleave目标)。否则为null 
screenX(只读)long
全局(屏幕)坐标中鼠标指针的X坐标。
screenY(只读)long
全局(屏幕)坐标中鼠标指针的Y坐标。
clientX(只读)long
鼠标指针在本地(DOM内容)坐标中的X坐标。
clientY(只读)long
鼠标指针在本地(DOM内容)坐标中的Y坐标。
button(只读)unsigned short
这始终为0,因为没有按钮按下此事件(鼠标移动)。
buttons(只读)unsigned short
触发鼠标事件时按下按钮:左按钮= 1,右按钮= 2,中间(滚轮)按钮= 4,第4按钮(通常,“浏览器返回”按钮)= 8,第5按钮(通常为“浏览器”转发“按钮”= 16。如果按下两个或更多按钮,则返回值的逻辑和。例如,如果按下左键和右键,则返回3(= 1 | 2)。
mozPressure(只读)float
成事件时施加到触摸或制表设备的压力量;此值介于 0.0 (最小压力) 和 1.0 (最大压力) 之间。
ctrlKey(只读)boolean
如果在触发事件时控制键已关闭,则为true,否则为false
shiftKey(只读)boolean
如果在事件被触发时shift键已关闭,则为true,否则为false
altKey(只读)boolean
如果事件被触发时alt键已关闭,则为true,否则为false
metaKey(只读)boolean
如果在触发事件时meta键已关闭,则为true,否则为false

示例

以下示例说明了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格式。

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

 了解如何提供帮助!
  • 电脑端

Chrome
Firefox(Gecko)Internet Explorer
Edge
Opera
Safari
基本支持支持支持支持支持支持支持
在禁用的表单元素上支持[1]支持:44.0[2]支持不支持支持[1]
  • 移动端

AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持?支持????
在禁用的表单元素上
?不支持????

注释:

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

[2]在错误218093中实现。

以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部