codecamp

EventTarget事件:mouseover

EventTarget事件 - mouseover

将mouseover指针设备移动到附加了侦听器的元素或其子节点之一上时会触发该事件。

基本信息

规范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

示例

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

<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 over the unordered list
  test.addEventListener("mouseenter", function( event ) {   
    // highlight the mouseenter 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 over a different list item
  test.addEventListener("mouseover", function( event ) {   
    // highlight the mouseover 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中实现。

EventTarget事件:mouseout
EventTarget事件:mouseup
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Fetch API官方文档指南

Fetch API方法

WindowOrWorkerGlobalScope执行者:window

window属性

WindowOrWorkerGlobalScope执行者:WorkerGlobalScope

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }