From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/api/element/mouseout_event/index.html | 126 +++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 files/zh-cn/web/api/element/mouseout_event/index.html (limited to 'files/zh-cn/web/api/element/mouseout_event') diff --git a/files/zh-cn/web/api/element/mouseout_event/index.html b/files/zh-cn/web/api/element/mouseout_event/index.html new file mode 100644 index 0000000000..f77a4e8162 --- /dev/null +++ b/files/zh-cn/web/api/element/mouseout_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'Element: mouseout 事件' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouseout + - 事件 + - 参考 + - 接口 +translation_of: Web/API/Element/mouseout_event +--- +

当移动指针设备（通常是鼠标），使指针不再包含在这个元素或其子元素中时，mouseout 事件被触发。当指针从一个元素移入其子元素时，mouseout 也会被触发，因为子元素遮盖了父元素的可视区域。

+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Interface{{domxref("MouseEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+ +

示例

+ +

以下示例将说明如何使用 mouseout 事件。

+ +

mouseout 和 mouseleave

+ +

以下示例说明了 mouseout 和 mouseleave 事件的区别。当鼠标离开<ul> 时，mouseleave 事件会添加到 {{HTMLElement("ul")}} 以将列表变成紫色。mouseout 在鼠标移出目标元素时被添加到列表，以将目标元素变成橙色。

+ +

当你尝试的时候，你会发现 mouseout 被添加到单个列表项目上，而 mouseleave 则应用于整个列表，这取决于列表项目的层次关系，而列表项目遮盖了底层的 <ul>。

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// 当鼠标移出<ul>元素时，短暂地将列表变成紫色
+test.addEventListener("mouseleave", function( event ) {
+  // 高亮mouseleave的目标
+  event.target.style.color = "purple";
+
+  // 延迟一秒后重置颜色
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// 当鼠标离开<li>元素时，短暂地将其变成橙色
+test.addEventListener("mouseout", function( event ) {
+  // 高亮mouseout的目标
+  event.target.style.color = "orange";
+
+  // 延迟500ms后重置颜色
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+ +

结果

+ +

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+ +

浏览器兼容性

+ +

{{Compat("api.Element.mouseout_event")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf