元素：mouseenter 事件

语法

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

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

onmouseenter = (event) => { }

事件类型

一个 MouseEvent。继承自 UIEvent 和 Event。

事件属性

此接口还继承其父级 UIEvent 和 Event 的属性。

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 事件的行为

这描述了四个没有内边距或外边距的同心 div 接收到的 mouseenter 事件，因此所有事件同时发生： 当进入层级结构中的每个元素时，都会向它们发送一个 mouseenter 事件。在这里，当指针到达文本时，会向层级结构中的四个元素发送 4 个事件。

mouseover 事件的行为

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

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

结合相应的 mouseleave（当鼠标离开其内容区域时在元素上触发），mouseenter 事件的行为方式与 CSS :hover 伪类非常相似。

示例

mouseover 文档包含一个示例，说明 mouseover 和 mouseenter 之间的区别。

mouseenter

以下这个简单的例子使用 mouseenter 事件来改变 div 的边框，当鼠标进入它所分配的空间时。然后它向列表中添加一个项目，其中包含 mouseenter 或 mouseleave 事件的编号。

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 #333333;
}

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 #333333";
  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);
}

结果

规范

浏览器兼容性

另见

• 学习：事件简介
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseleave
• contextmenu
• pointerenter