From 59c437a737cb732c5fdecf12d5a9abe9da0d6bf0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 25 Oct 2021 01:13:06 +0900 Subject: Element 要素の MouseEvent 系のイベントを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/24 時点の英語版に基づく - contextmenu と auxclick は新規翻訳 --- files/ja/web/api/element/mouseout_event/index.md | 156 +++++++++++------------ 1 file changed, 71 insertions(+), 85 deletions(-) (limited to 'files/ja/web/api/element/mouseout_event') diff --git a/files/ja/web/api/element/mouseout_event/index.md b/files/ja/web/api/element/mouseout_event/index.md index a27a6f4f57..89d738349f 100644 --- a/files/ja/web/api/element/mouseout_event/index.md +++ b/files/ja/web/api/element/mouseout_event/index.md @@ -4,68 +4,72 @@ slug: Web/API/Element/mouseout_event tags: - API - DOM - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mouseout - move - - イベント - - マウス +browser-compat: api.Element.mouseout_event translation_of: Web/API/Element/mouseout_event --- -
{{APIRef}}
+{{APIRef}} -

mouseout イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

+**`mouseout`** イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 + +`mouseout` は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}} +
-

例

+## 例 -

以下の例は mouseout イベントの使い方を示しています。

+以下の例は `mouseout` イベントの使い方を示しています。 -

mouseout と mouseleave

+

mouseout と mouseleave

-

以下の例は、 mouseout と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 mouseleave イベントを {{HTMLElement("ul")}} に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。 mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

+以下の例は、`mouseout` と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。`mouseleave` イベントを {{HTMLElement("ul")}} に追加し、マウスが `<ul>` を出るたびにリストを紫色に着色するようにします。`mouseout` をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。 -

これを試してみると、 mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

+これを試してみると、`mouseout` はそれぞれのリスト項目に配信されるのに対し、 `mouseleave` は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある `<ul>` を不明瞭にします。 -

HTML

+#### HTML -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
+```html + +``` -

JavaScript

+#### JavaScript -
let test = document.getElementById("test");
+```js
+let test = document.getElementById("test");
 
-// マウスが <ul> を出るとリストを一時的に紫色にします
-// ときに1度だけ実行されます
+// マウスが
- -

結果

- -

{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}{{Spec2('DOM3 Events')}}
+}, false); +``` -

ブラウザーの互換性

+#### 結果 -

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

+{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}} -

関連情報

+## 仕様書 - +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("Element/mousemove_event", "mousemove")}} +- {{domxref("Element/click_event", "click")}} +- {{domxref("Element/dblclick_event", "dblclick")}} +- {{domxref("Element/mouseover_event", "mouseover")}} +- {{domxref("Element/mouseenter_event", "mouseenter")}} +- {{domxref("Element/mouseleave_event", "mouseleave")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} -- cgit v1.2.3-54-g00ecf