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/mouseover_event/index.md | 144 ++++++++++------------ 1 file changed, 65 insertions(+), 79 deletions(-) (limited to 'files/ja/web/api/element/mouseover_event/index.md') diff --git a/files/ja/web/api/element/mouseover_event/index.md b/files/ja/web/api/element/mouseover_event/index.md index d6354496f4..18c4118699 100644 --- a/files/ja/web/api/element/mouseover_event/index.md +++ b/files/ja/web/api/element/mouseover_event/index.md @@ -5,58 +5,62 @@ tags: - API - Cursor - DOM - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mouseover - move - - pointer + - ポインター +browser-compat: api.Element.mouseover_event translation_of: Web/API/Element/mouseover_event --- -
{{APIRef}}
+{{APIRef}} -

mouseover イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。

+**`mouseover`** イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}} +
-

例

+

例

-

以下の例は、 mouseover と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。

+以下の例は、`mouseover` と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。 -

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");
 
 // このハンドラーは、カーソルが順序なしリストの上を移動した
 // ときに1度だけ実行されます
@@ -80,49 +84,31 @@ test.addEventListener("mouseover", function( event ) {
   setTimeout(function() {
     event.target.style.color = "";
   }, 500);
-}, false);
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

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

ブラウザーの互換性

+### 結果 -

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

+{{EmbedLiveSample('Examples')}} -

関連情報

+## 仕様書 - +{{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/mouseout_event", "mouseout")}} +- {{domxref("Element/mouseenter_event", "mouseenter")}} +- {{domxref("Element/mouseleave_event", "mouseleave")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} -- cgit v1.2.3-54-g00ecf