元素:mouseleave 事件
当指向设备(通常是鼠标)的光标从 Element
移出时,将向其触发 mouseleave
事件。
mouseleave
和 mouseout
类似,但不同之处在于 mouseleave
不冒泡而 mouseout
冒泡。这意味着当指针退出元素 和 其所有后代时,将触发 mouseleave
,而当指针离开元素 或 离开元素的后代之一时,将触发 mouseout
(即使指针仍处于元素范围内)。
当元素被替换或从 DOM 中移除时,不会触发 mouseleave
和 mouseout
事件。
请注意,“从事件中移出”是指 DOM 树中的元素位置,而不是其视觉位置。例如,如果两个兄弟元素的位置使其中一个位于另一个内部,那么从外部元素移动到内部元素将触发外部元素的 mouseleave
,即使指针仍然位于外部元素的边界内。
语法
在像 addEventListener()
这样的方法中使用事件名称,或设置事件处理程序属性。
addEventListener("mouseleave", (event) => {});
onmouseleave = (event) => {};
事件类型
一个 MouseEvent
。继承自 UIEvent
和 Event
。
事件属性
此接口还继承了其父类 UIEvent
和 Event
的属性。
MouseEvent.altKey
只读-
如果鼠标事件触发时 alt 键处于按下状态,则返回
true
。 -
鼠标事件触发时按下的按钮编号(如果适用)。
-
鼠标事件触发时按下的按钮(如果有)。
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.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
事件。这里,当指针从文本移动到最外层 div(此处表示)之外的区域时,会向层次结构中的四个元素发送四个事件。
mouseout
事件的行为
会向 DOM 树中最深的元素发送一个 mouseout
事件,然后它会向上冒泡,直到被处理程序取消或到达根元素。
示例
mouseout
文档包含一个示例,说明 mouseout
和 mouseleave
之间的区别。
mouseleave
以下简单的示例使用 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 #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);
}
结果
规范
规范 |
---|
UI 事件 # event-type-mouseleave |
HTML 标准 # handler-onmouseleave |
浏览器兼容性
BCD 表格仅在浏览器中加载