元素:mouseleave 事件

基线 广泛可用

此功能已广泛使用,可在许多设备和浏览器版本中使用。它自 2015 年 7 月.

当指向设备(通常是鼠标)的光标从 Element 移出时,将向其触发 mouseleave 事件。

mouseleavemouseout 类似,但不同之处在于 mouseleave 不冒泡而 mouseout 冒泡。这意味着当指针退出元素 其所有后代时,将触发 mouseleave,而当指针离开元素 离开元素的后代之一时,将触发 mouseout(即使指针仍处于元素范围内)。

当元素被替换或从 DOM 中移除时,不会触发 mouseleavemouseout 事件。

请注意,“从事件中移出”是指 DOM 树中的元素位置,而不是其视觉位置。例如,如果两个兄弟元素的位置使其中一个位于另一个内部,那么从外部元素移动到内部元素将触发外部元素的 mouseleave,即使指针仍然位于外部元素的边界内。

语法

在像 addEventListener() 这样的方法中使用事件名称,或设置事件处理程序属性。

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

onmouseleave = (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 的别名。

mouseleave 事件的行为

mouseleave behavior diagram

当指针离开层次结构中的元素时,会向每个元素发送一个 mouseleave 事件。这里,当指针从文本移动到最外层 div(此处表示)之外的区域时,会向层次结构中的四个元素发送四个事件。

mouseout 事件的行为

mouseout behavior diagram

会向 DOM 树中最深的元素发送一个 mouseout 事件,然后它会向上冒泡,直到被处理程序取消或到达根元素。

示例

mouseout 文档包含一个示例,说明 mouseoutmouseleave 之间的区别。

mouseleave

以下简单的示例使用 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-mouseleave
HTML 标准
# handler-onmouseleave

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅