元素:mouseenter 事件

基线 广泛可用

此功能已完善,可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用 2015 年 7 月.

当指向设备(通常是鼠标)最初移动到其热点位于触发事件的元素内时,mouseenter 事件将在 Element 上触发。

请注意,“移入事件”指的是元素在 DOM 树中的位置,而不是其视觉位置。例如,如果子元素的位置使其放置在父元素之外,那么移入子元素将触发父元素上的 mouseenter 事件,即使指针仍在父元素的边界之外。

语法

在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。

js
addEventListener("mouseenter", (event) => {});

onmouseenter = (event) => {};

事件类型

事件属性

此接口还继承其父级 UIEventEvent 的属性。

MouseEvent.altKey 只读

如果在触发鼠标事件时 alt 键按下,则返回 true

MouseEvent.button 只读

触发鼠标事件时按下的按钮编号(如果适用)。

MouseEvent.buttons 只读

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

MouseEvent.clientX 只读

鼠标指针在视口坐标中的 X 坐标。

MouseEvent.clientY 只读

鼠标指针在视口坐标中的 Y 坐标。

MouseEvent.ctrlKey 只读

如果在触发鼠标事件时 control 键按下,则返回 true

MouseEvent.layerX 非标准 只读

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

MouseEvent.layerY 非标准 只读

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

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.mozInputSource 非标准 只读

生成事件的设备类型(MOZ_SOURCE_* 常量之一)。例如,这使您可以确定鼠标事件是由实际鼠标还是触摸事件生成(这可能会影响您解释与事件关联的坐标的准确程度)。

MouseEvent.webkitForce 非标准 只读

单击时施加的压力量。

MouseEvent.x 只读

MouseEvent.clientX 的别名。

MouseEvent.y 只读

MouseEvent.clientY 的别名。

使用说明

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

mouseenter 事件的行为

Mouseenter 行为图 当进入层次结构中的每个元素时,都会向其发送一个 mouseenter 事件。当指针到达文本时,这里向层次结构中的四个元素发送 4 个事件。

mouseover 事件的行为

Mouseover 行为图 一个 mouseover 事件被发送到 DOM 树中最深的元素,然后它向上冒泡到层次结构,直到被处理程序取消或到达根。

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

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

示例

mouseover 文档中有一个示例说明了 mouseovermouseenter 之间的区别。

mouseenter

以下简单的示例使用 mouseenter 事件在鼠标进入分配给它的空间时更改 div 的边框。然后,它使用 mouseentermouseleave 事件的编号向列表中添加一个项目。

HTML

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

CSS

设置 div 的样式使其更易于查看。

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

JavaScript

js
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);
}

结果

规范

规范
UI 事件
# event-type-mouseenter
HTML 标准
# handler-onmouseenter

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅