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/mouseenter_event/index.md | 189 ++++++++++----------- 1 file changed, 90 insertions(+), 99 deletions(-) (limited to 'files/ja/web/api/element/mouseenter_event') diff --git a/files/ja/web/api/element/mouseenter_event/index.md b/files/ja/web/api/element/mouseenter_event/index.md index f78dfa48da..2ba6662fd0 100644 --- a/files/ja/web/api/element/mouseenter_event/index.md +++ b/files/ja/web/api/element/mouseenter_event/index.md @@ -6,97 +6,106 @@ tags: - Cursor - DOM - Element - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mouseenter - - pointer - - イベント + - ポインター +browser-compat: api.Element.mouseenter_event translation_of: Web/API/Element/mouseenter_event --- -
{{APIRef}}
+{{APIRef}} -

mouseenter イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。

+**`mouseenter`** イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発行された要素の中に移動したときに {{domxref("Element")}} に発行されます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}} +
-

使用上の注意

+## 使用上の注意 + +`mouseenter` は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、[バブリング](/ja/docs/Web/API/Event/bubbles)しない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。 -

mouseenter は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

+#### `mouseenter` イベントの動作 -
-
mouseenter.png
-要素の階層に入った場合、それぞれの要素に1つずつ mouseenter が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 +![](mouseenter.png) +要素の階層に入った場合、それぞれの要素に 1 つずつ `mouseenter` が送信されます。ここでポインターがテキストに達した時、階層の 4 つの要素に 4 つのイベントが送信されます。 -
mouseover.png
-DOM ツリーの最も深い要素に1つの mouseover イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。
+#### `mouseover` イベントの動作 -

深い階層では、数多くの mouseenter イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

+![](mouseover.png) +DOM ツリーの最も深い要素に 1 つの `mouseover` イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。 -

対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave と組み合わせると、 mouseenter イベントは CSS の {{cssxref(':hover')}} 疑似クラスととても似た方法で動作します。

+深い階層では、数多くの `mouseenter` イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は `mouseover` イベントを待ち受けした方が優れています。 -

+対応する (マウスがコンテンツ領域から出たときに要素に発生する) `mouseleave` と組み合わせると、 `mouseenter` イベントは CSS の {{cssxref(':hover')}} 擬似クラスととても似た方法で動作します。 -

mouseover のドキュメントには、 mouseovermouseenter の間の違いを説明する例があります。

+## 例 -

mouseenter

+[`mouseover`](/ja/docs/Web/API/Element/mouseover_event#example) のドキュメントには、 `mouseover` と `mouseenter` の間の違いを説明する例があります。 -

以下は端的な例ですが、 mouseenter イベントを使用して、マウスが割り当てられた空間に入ったときに div の境界を変化させます。そして、リストに mouseenter または mouseleave イベントの回数を示す項目を追加します。

+### mouseenter -

HTML

+以下は端的な例ですが、 `mouseenter` イベントを使用して、マウスが割り当てられた空間に入ったときに `div` の境界を変化させます。そして、リストに `mouseenter` または `mouseleave` イベントの回数を示す項目を追加します。 -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
+#### HTML -

CSS

+```html +
+ +
+``` -

div を整形してもっと目立つようにします。

+#### CSS -
#mouseTarget {
+`div` を整形してもっと目立つようにします。
+
+```css
+#mouseTarget {
   box-sizing: border-box;
   width:15rem;
   border:1px solid #333;
-}
+} +``` -

JavaScript

+#### JavaScript -
var enterEventCount = 0;
+```js
+var enterEventCount = 0;
 var leaveEventCount = 0;
 const mouseTarget = document.getElementById('mouseTarget');
 const unorderedList = document.getElementById('unorderedList');
 
-mouseTarget.addEventListener('mouseenter', e => {
+mouseTarget.addEventListener('mouseenter', e => {
   mouseTarget.style.border = '5px dotted orange';
   enterEventCount++;
   addListItem('This is mouseenter event ' + enterEventCount + '.');
 });
 
-mouseTarget.addEventListener('mouseleave', e => {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem('This is mouseleave event ' + leaveEventCount + '.');
@@ -114,49 +123,31 @@ function addListItem(text) {
 
   // リストに新しく生成したリスト項目を追加する
   unorderedList.appendChild(newListItem);
-}
- -

結果

- -

{{EmbedLiveSample('mouseenter')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+} +``` + +### 結果 + +{{EmbedLiveSample('mouseenter')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

ブラウザーの対応

- -

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

- -

関連情報

- - +- [イベントの紹介](/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