EventTarget事件:mouseenter

2019-01-23 16:26 更新

(只读)EventTarget事件 - mouseenter

当指针设备(通常是鼠标)移动到连接了监听器的元素上时,会触发mouseenter事件。

虽然类似mouseover,但它的不同之处在于它不会冒泡,并且当指针从其后代的物理空间之一移动到其自己的物理空间时,它不会被发送到任何后代。

输入时,会向层次结构的每个元素发送一个mouseenter事件。当指针到达文本时,此处将4个事件发送到层次结构的四个元素。

一个单独的mouseover事件被发送到DOM树的最深层元素,然后它会向层次结构冒泡,直到它被处理程序取消或到达根目录。

使用深层次结构,发送的mouseenter事件数量可能非常巨大,并导致严重的性能问题。在这种情况下,最好是监听mouseover事件。

结合其对称事件mouseleave的行为,mouseenter DOM事件以与CSS :hover伪类非常相似的方式运行。

基本信息

规范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文档中有一个示例说明了mouseover和mouseenter之间的区别。

以下示例说明如何使用mouseover模拟mouseenter事件的事件委派原则。

<ul id="test">
  <li>
    <ul class="enter-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
  </li>
  <li>
    <ul class="enter-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
  </li>
</ul>

<script>
  var delegationSelector = ".enter-sensitive";

  document.getElementById("test").addEventListener("mouseover", function( event ) {
    var target = event.target,
        related = event.relatedTarget,
        match;

    // search for a parent node matching the delegation selector
    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
        target = target.parentNode;
    }

    // exit if no matching node has been found
    if ( !match ) { return; }

    // loop through the parent of the related target to make sure that it's not a child of the target
    while ( related && related != target && related != document ) {
        related = related.parentNode;
    }

    // exit if this is the case
    if ( related == target ) { return; }

    // the "delegated mouseenter" handler can now be executed
    // change the color of the text
    target.style.color = "orange";
    // reset the color after a small amount of time
    setTimeout(function() {
        target.style.color = "";
    }, 500);
    

  }, false);
 

  // function used to check if a DOM element matches a given selector
  // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
  function matches( elem, selector ){
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector( selector );
  };
</script>

浏览器兼容性

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

  • 电脑端

Chrome
Edge
Firefox(Gecko)Internet Explorer
Opera
Safari
基本支持支持:30 [1]支持支持:10 [2]支持:5.5不支持:15.0 、17.0支持:7 [3]
在禁用的表单元素上不支持不支持支持:44.0[4]不支持没有支持
  • 移动端

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

注释:

[1]在错误236215中实现。

[2]在错误432698中实现。

[3]Safari 7在许多不允许的情况下触发事件,使整个事件无用。有关错误的描述,请参阅错误470258(它也存在于旧的Chrome版本中)。Safari 8具有正确的行为。

[4]在错误218093中实现。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号