元素:mouseenter 事件
当指向设备(通常是鼠标)最初移动到其热点位于触发事件的元素内时,mouseenter
事件将在 Element
上触发。
请注意,“移入事件”指的是元素在 DOM 树中的位置,而不是其视觉位置。例如,如果子元素的位置使其放置在父元素之外,那么移入子元素将触发父元素上的 mouseenter
事件,即使指针仍在父元素的边界之外。
语法
在诸如 addEventListener()
之类的方法中使用事件名称,或设置事件处理程序属性。
addEventListener("mouseenter", (event) => {});
onmouseenter = (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
的别名。
使用说明
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 #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-mouseenter |
HTML 标准 # handler-onmouseenter |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。