mouseenter

当一个定点设备(通常指鼠标)第一次移动到触发事件元素中的激活区域时,mouseenter 事件在该 Element 中触发。

语法

在类似 addEventListener() 这样的方法中使用事件名称,或者设置事件处理器属性。

addEventListener('mouseenter', (event) => {});

onmouseenter = (event) => { };

事件类型

事件属性

这个接口也继承其父 UIEventEvent 的属性。

MouseEvent.altKey 只读

当鼠标事件被触发时,如果按着 alt 键,返回 true

MouseEvent.button 只读

触发鼠标事件时,按下按钮的编号。

MouseEvent.buttons 只读

触发鼠标事件时按下的按钮(如果有的话)。

MouseEvent.clientX 只读

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

MouseEvent.clientY 只读

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

MouseEvent.ctrlKey 只读

当鼠标事件被触发时,如果按着 control 键,返回 true

MouseEvent.layerX (en-US) 非标准 只读

返回事件相对于当前层的水平坐标。

MouseEvent.layerY (en-US) 非标准 只读

返回事件相对于当前层的垂直坐标。

MouseEvent.metaKey 只读

当鼠标事件被触发时,如果按着 meta 键,返回 true

MouseEvent.movementX 只读

鼠标指针相对于最后一次 mousemove 事件位置的 X 轴坐标。

MouseEvent.movementY 只读

鼠标指针相对于最后一次 mousemove 事件位置的 Y 轴坐标。

MouseEvent.offsetX 只读

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

MouseEvent.offsetY 只读

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

MouseEvent.pageX 只读

鼠标指针相对于整个文档的 X 轴坐标。

MouseEvent.pageY 只读

鼠标指针相对于整个文档的 Y 轴坐标。

MouseEvent.relatedTarget 只读

事件的次要目标(如果有的话)。

MouseEvent.screenX 只读

鼠标指针相对于屏幕的 X 轴坐标。

MouseEvent.screenY 只读

鼠标指针相对于屏幕的 Y 轴坐标。

MouseEvent.shiftKey 只读

当鼠标事件被触发时,如果按着 shift 键,返回 true

MouseEvent.mozPressure 非标准 已弃用 只读

产生事件时施加到触摸或平板电脑设备的压力量;该值在 0.0(最小压力)和 1.0(最大压力)之间。你应该使用 PointerEvent 并查看 pressure (en-US) 属性,而不是使用此废弃的(和非标准)属性。

MouseEvent.mozInputSource 非标准 只读

生成事件的设备类型(MOZ_SOURCE_* 常量之一)。例如,这让你决定鼠标事件是否由实际的鼠标还是触摸事件生成(这可能会在一定程度影响你对事件相关坐标判断的准确性)。

MouseEvent.webkitForce (en-US) 非标准 只读

单击时施加的压力。

MouseEvent.x 只读

MouseEvent.clientX 的别名。

MouseEvent.y 只读

MouseEvent.clientY 的别名。

使用说明

尽管与 mouseover 类似,但是 mouseenter 的不同之处在于当鼠标指针从它后代的物理空间移动到它自己的物理空间时,它不会冒泡,也不会发送给它的任何后代。

mouseenter 事件的行为:

输入时,一个 mouseenter 事件会向层次结构中的每个元素发送一个鼠标输入事件。在这里,当指针到达文本时,四个事件被发送到层次结构中的四个元素。

mouseover 事件的行为:

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

由于层次结构很深,发送到 mouseover 事件可能相当多,并导致严重的性能问题。在这种情况下,最好是监听 mouseenter 事件。

结合相应的 mouseleave(当鼠标退出其内容区域时向元素触发),mouseenter 事件的作用与 CSS 伪类 :hover 非常相似。

示例

mouseover 文档有一个阐述了 mouseovermouseenter 之间区别的示例。

mouseenter

以下简单的示例展示了当鼠标进入分配给它的空间时,mouseenter 事件将改变 div 上的边框。然后它会将 mouseentermouseleave 事件触发次数的文本添加到列表中。

HTML

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

div 一些样式,使其更好的展示。

#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}

JavaScript

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById('mouseTarget');
const unorderedList = document.getElementById('unorderedList');

mouseTarget.addEventListener('mouseenter', (e) => {
  mouseTarget.style.border = '5px dotted orange';
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener('mouseleave', (e) => {
  mouseTarget.style.border = '1px solid #333';
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}

结果

规范

Specification
UI Events
# event-type-mouseenter
HTML Standard
# handler-onmouseenter

浏览器兼容性

BCD tables only load in the browser

参见