EventTarget事件:mouseenter
(只读)EventTarget事件 - mouseenter
当指针设备(通常是鼠标)移动到连接了监听器的元素上时,会触发mouseenter事件。
虽然类似mouseover,但它的不同之处在于它不会冒泡,并且当指针从其后代的物理空间之一移动到其自己的物理空间时,它不会被发送到任何后代。
输入时,会向层次结构的每个元素发送一个mouseenter事件。当指针到达文本时,此处将4个事件发送到层次结构的四个元素。
一个单独的mouseover事件被发送到DOM树的最深层元素,然后它会向层次结构冒泡,直到它被处理程序取消或到达根目录。
使用深层次结构,发送的mouseenter事件数量可能非常巨大,并导致严重的性能问题。在这种情况下,最好是监听mouseover事件。
结合其对称事件mouseleave的行为,mouseenter DOM事件以与CSS :hover伪类非常相似的方式运行。
基本信息
规范 | DOM L3 |
---|---|
接口 | MouseEvent |
是否冒泡 | 否 |
是否可取消 | 否 |
目标 | Element |
默认操作 | 没有 |
属性
属性 | 类型 | 描述 |
---|---|---|
target (只读) | EventTarget | 事件目标(DOM树中最顶层的目标)。 |
type (只读) | DOMString | 事件的类型。 |
bubbles (只读) | Boolean | 事件是否正常冒泡 |
cancelable (只读) | Boolean | 事件是否可以取消 |
view (只读) | WindowProxy | document.defaultView (window 文件) |
detail (只读) | long (float ) | 0。 |
currentTarget (只读) | EventTarget | 附加了事件监听器的节点。 |
relatedTarget (只读) | EventTarget | 对于mouseover ,mouseout ,mouseenter 和mouseleave 事件:互补事件的目标(在mouseenter 事件的情况下为mouseleave 目标)。否则为null 。 |
screenX (只读) | long | 全局(屏幕)坐标中鼠标指针的X坐标。 |
screenY (只读) | long | 全局(屏幕)坐标中鼠标指针的Y坐标。 |
clientX (只读) | long | 鼠标指针在本地(DOM内容)坐标中的X坐标。 |
clientY (只读) | long | 鼠标指针在本地(DOM内容)坐标中的Y坐标。 |
button (只读) | unsigned short | 这始终为0,因为没有按钮按下此事件(鼠标移动)。 |
buttons (只读) | unsigned short | 触发鼠标事件时按下按钮:左按钮= 1,右按钮= 2,中间(滚轮)按钮= 4,第4按钮(通常,“浏览器返回”按钮)= 8,第5按钮(通常为“浏览器”转发“按钮”= 16。如果按下两个或更多按钮,则返回值的逻辑和。例如,如果按下左键和右键,则返回3(= 1 | 2)。 |
mozPressure (只读) | float | 生成事件时施加到触摸或制表设备的压力量;此值介于 0.0 (最小压力) 和 1.0 (最大压力) 之间。 |
ctrlKey (只读) | boolean | 如果在触发事件时控制键已关闭,则为true ,否则为false 。 |
shiftKey (只读) | boolean | 如果在事件被触发时shift键已关闭,则为true ,否则为false 。 |
altKey (只读) | boolean | 如果事件被触发时alt键已关闭,则为true ,否则为false 。 |
metaKey (只读) | boolean | 如果在触发事件时meta键已关闭,则为true ,否则为false 。 |
示例
mouseover文档中有一个示例说明了mouseover和mouseenter之间的区别。
以下示例说明如何使用mouseover模拟mouseenter事件的事件委派原则。
<ul id="test">
<li>
<ul class="enter-sensitive">
<li>item 1-1</li>
<li>item 1-2</li>
</ul>
</li>
<li>
<ul class="enter-sensitive">
<li>item 2-1</li>
<li>item 2-2</li>
</ul>
</li>
</ul>
<script>
var delegationSelector = ".enter-sensitive";
document.getElementById("test").addEventListener("mouseover", function( event ) {
var target = event.target,
related = event.relatedTarget,
match;
// search for a parent node matching the delegation selector
while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
target = target.parentNode;
}
// exit if no matching node has been found
if ( !match ) { return; }
// loop through the parent of the related target to make sure that it's not a child of the target
while ( related && related != target && related != document ) {
related = related.parentNode;
}
// exit if this is the case
if ( related == target ) { return; }
// the "delegated mouseenter" handler can now be executed
// change the color of the text
target.style.color = "orange";
// reset the color after a small amount of time
setTimeout(function() {
target.style.color = "";
}, 500);
}, false);
// function used to check if a DOM element matches a given selector
// the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
function matches( elem, selector ){
// the matchesSelector is prefixed in most (if not all) browsers
return elem.matchesSelector( selector );
};
</script>
浏览器兼容性
我们将兼容性数据转换为机器可读的JSON格式。
- 电脑端
Chrome | Edge | Firefox(Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|---|
基本支持 | 支持:30 [1] | 支持 | 支持:10 [2] | 支持:5.5 | 不支持:15.0 、17.0 | 支持:7 [3] |
在禁用的表单元素上 | 不支持 | 不支持 | 支持:44.0[4] | 不支持 | 没有支持 | ? |
- 移动端
Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|---|---|
基本支持 | ? | ? | 支持 | ? | ? | ? | ? |
在禁用的表单元素上 | ? | ? | 不支持 | ? | ? | ? | ? |
注释:
[1]在错误236215中实现。
[2]在错误432698中实现。
[3]Safari 7在许多不允许的情况下触发事件,使整个事件无用。有关错误的描述,请参阅错误470258(它也存在于旧的Chrome版本中)。Safari 8具有正确的行为。
[4]在错误218093中实现。