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/auxclick_event/index.md | 141 +++++++++++++++ files/ja/web/api/element/click_event/index.md | 192 +++++++++------------ .../ja/web/api/element/contextmenu_event/index.md | 94 ++++++++++ files/ja/web/api/element/dblclick_event/index.md | 144 +++++++--------- files/ja/web/api/element/mousedown_event/index.md | 112 +++++------- files/ja/web/api/element/mouseenter_event/index.md | 189 ++++++++++---------- files/ja/web/api/element/mouseleave_event/index.md | 179 +++++++++---------- files/ja/web/api/element/mousemove_event/index.md | 159 ++++++++--------- files/ja/web/api/element/mouseout_event/index.md | 156 ++++++++--------- files/ja/web/api/element/mouseover_event/index.md | 144 +++++++--------- files/ja/web/api/element/mouseup_event/index.md | 113 ++++++------ 11 files changed, 863 insertions(+), 760 deletions(-) create mode 100644 files/ja/web/api/element/auxclick_event/index.md create mode 100644 files/ja/web/api/element/contextmenu_event/index.md (limited to 'files/ja/web/api/element') diff --git a/files/ja/web/api/element/auxclick_event/index.md b/files/ja/web/api/element/auxclick_event/index.md new file mode 100644 index 0000000000..8e4b871629 --- /dev/null +++ b/files/ja/web/api/element/auxclick_event/index.md @@ -0,0 +1,141 @@ +--- +title: 'Element: auxclick イベント' +slug: Web/API/Element/auxclick_event +tags: + - Element + - イベント + - MouseEvent + - リファレンス + - UI + - auxclick + - マウス +browser-compat: api.Element.auxclick_event +translation_of: Web/API/Element/auxclick_event +--- +{{APIRef}} + +**`auxclick`** イベントは、ポインティングデバイスの第 1 ボタン以外のボタン (マウスの第 1 の—通常は左端の—ボタン) が同じ要素 ({{domxref("Element")}}) 内で両方とも押され、離されたとき、その要素で発行されます。 + +`auxclick` は、 {{event("mousedown")}} および {{event("mouseup")}} イベントが発生した後に、順に発生します。 + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onauxclick", "onauxclick")}} +
+ +## 既定のアクションの抑止 + +Firefox を含む大多数のブラウザーでは、中央クリックを新しいタブでリンクを開く機能にマッピングしていますが、{{domxref("Event.preventDefault()", "preventDefault()")}} を `auxclick` イベントハンドラー内で呼び出すことで、この動作を取り消すことができます。 + +入力やナビゲーションに対応していない要素で発生した `auxclick` イベントを待ち受ける場合、マウスの中ボタンのダウンアクションにマッピングされた他の既定のアクションを明示的に防止したい場合がよくあります。Windows では自動スクロール、macOS や Linux ではクリップボードの貼り付けなどがこれにあたります。これは、{{domxref("Element/mousedown_event", "mousedown")}} イベントや {{domxref("HTMLElement/pointerdown_event", "pointerdown")}} イベントの既定の動作を防ぐことで実現できます。 + +さらに、右クリックの後にシステムコンテキストメニューを開かないようにする必要がある場合もあります。オペレーティングシステムのタイミングの違いにより、これも `auxclick` の既定のの動作では防ぐことができません。代わりに、{{domxref("Element/contextmenu_event", "contextmenu")}} イベントの既定の動作を防止することで実現できます。 + +

例

+ +この例では、 {{domxref("GlobalEventHandlers.onclick", "onclick")}} と {{domxref("GlobalEventHandlers.onauxclick", "onauxclick")}} という 2 つのイベントハンドラーの関数を定義しています。前者はボタンの背景色を変更し、後者はボタンの前景 (テキスト) の色を変更します。また、このデモを多ボタンマウスで試すことで、2 つの関数が動作する様子を見ることができます ([GitHubでライブで見る](https://mdn.github.io/dom-examples/auxclick/)ことができ、[ソースコードも見る](https://github.com/mdn/dom-examples/blob/master/auxclick/index.html)ことができます)。 + +### JavaScript + +```js +let button = document.querySelector('button'); +let html = document.querySelector('html'); + +function random(number) { + return Math.floor(Math.random() * number); +} + +function randomColor() { + return `rgb(${random(255)}, ${random(255)}, ${random(255)})`; +} + +button.onclick = function() { + button.style.backgroundColor = randomColor(); +}; + +button.onauxclick = function(e) { + e.preventDefault(); + button.style.color = randomColor(); +} + +button.oncontextmenu = function(e) { + e.preventDefault(); +} +``` + + `auxclick` イベントを {{domxref("GlobalEventHandlers.onauxclick", "onauxclick")}} でキャプチャするだけでなく、 {{domxref("Element.contextmenu_event", "contextmenu")}} イベントもキャプチャし、そのイベントで {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出して、色の変更が適用された後にコンテキストメニューがポップアップするのを防いでいることに注目してください。 + +### HTML + +```html + +``` + +```css hidden +html { + height: 100%; + overflow: hidden; +} + +body { + height: inherit; + display: flex; + justify-content: center; + align-items: center; + margin: 0; +} + +button { + border: 0; + background-color: white; + font-size: 8vw; + display: block; + width: 100%; + height: 100%; +} + +h1 { + letter-spacing: 0.5rem; +} +``` + +{{EmbedLiveSample("Examples", 640, 300)}} + +> **Note:** 3 ボタンマウスを使用している場合、左以外のボタンがクリックされると、`onauxclick` ハンドラーが実行されることがわかります (通常、ゲーミングマウスの「特殊」ボタンも含みます)。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/click_event", "click")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} +- {{domxref("Element/dblclick_event", "dblclick")}} +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("HTMLElement/pointerdown_event", "pointerdown")}} +- {{domxref("HTMLElement/pointerup_event", "pointerup")}} diff --git a/files/ja/web/api/element/click_event/index.md b/files/ja/web/api/element/click_event/index.md index 742d591101..4257230247 100644 --- a/files/ja/web/api/element/click_event/index.md +++ b/files/ja/web/api/element/click_event/index.md @@ -5,154 +5,128 @@ tags: - API - DOM - Element - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - NeedsBrowserCompatibility - NeedsMobileBrowserCompatibility - - Reference + - リファレンス - UI - click - - events - - mouse - - イベント - - インターフェイス - マウス translation_of: Web/API/Element/click_event --- -
{{APIRef}}
+{{APIRef}} -

click イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。

+**`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onclick", "onclick")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onclick", "onclick")}} +
-

ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。

+ある要素でボタンが押され、ボタンが離される前にポインタが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。 -

click は {{event("mousedown")}} および {{event("mouseup")}} イベントの後に、順番通りに発生します。

+`click` は {{domxref("Element/mousedown_event", "mousedown")}} および {{domxref("Element/mouseup_event", "mouseup")}} イベントの後、順番通りに発生します。 -

使用上の注意

+## 使用上の注意 -

click のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("Event.detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は detail が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。

+`click` のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。 -

Internet Explorer

+### Internet Explorer -

Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が transparent である要素が他の要素の上に重なった時、 click イベントを受け取らないというバグに悩まされていました。すべての click イベントはその下にある要素で発生していました。このライブサンプルを参照してください。

+Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) である要素が他の要素の上に重なった時、 `click` イベントを受け取らないというバグに悩まされていました。すべての `click` イベントはその下にある要素で発生していました。[このライブサンプル](http://jsfiddle.net/YUKma/show/)を参照してください。 -

このバグの知られている回避方法は以下の通りです。

+このバグの知られている回避方法は以下の通りです。 - +- IE9 のみの場合: -

Safari Mobile

+ - {{cssxref("background-color")}}`: rgba(0,0,0,0)` に設定する + - {{cssxref("opacity")}}`: 0` に設定し、{{cssxref("background-color")}} を明示的に [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) 以外に設定する -

Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) 悩ましいバグがあり、通常は対話型ではない要素 ({{HTMLElement("div")}} など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 イベントの委譲が使用されている場合) に click イベントが発生しません。デモはこのライブ例を参照してください。 Safari's docs on making elements clickable および definition of "clickable element" も参照してください。

+- IE8 および IE9 の場合: filter: alpha(opacity=0);` に設定し、 {{cssxref("background-color")}} を明示的に [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) 以外に設定する -

このバグの知られている回避策は以下のとおりです。

+## Safari Mobile - +Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) [悩ましいバグ](https://bugs.webkit.org/show_bug.cgi?id=153887)があり、通常は対話型ではない要素 ({{HTMLElement("div")}} など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 [イベントの委譲](https://davidwalsh.name/event-delegate)が使用されている場合) は `click` イベントが発生しません。デモは[このライブ例](https://jsfiddle.net/cvrhulu/k9t0sdnf/show/)を参照してください。 [Safari's docs on making elements clickable](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6) および [definition of "clickable element"](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7) も参照してください。 -

Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。

+このバグの知られている回避策は以下のとおりです。 - +- その要素およびそのすべての祖先に {{cssxref("cursor")}}`: pointer;` を設定する。 +- ダミーの `onclick="void(0)"` 属性を、その要素または {{HTMLElement("body")}} 以外の祖先のいずれかに設定する。 +- 通常は対話型になる要素 (例えば {{HTMLElement("a")}}) を、通常は対話型でない要素 (例えば {{HTMLElement("div")}}) の代わりに使用する。 +- `click` [イベントの委譲](https://davidwalsh.name/event-delegate)の使用をやめる。 -

例

+Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。 -

この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。

+- {{HTMLElement("a")}} (ただし `href` があるものに限る) +- {{HTMLElement("area")}} (ただし `href` があるものに限る) +- {{HTMLElement("button")}} +- {{HTMLElement("img")}} +- {{HTMLElement("input")}} +- {{HTMLElement("label")}} (ただしフォームコントロールに関連付けられているものに限る) +- {{HTMLElement("textarea")}} +- _このリストは不完全です。試験や調査を行って展開することで MDN にご協力ください。_ -

HTML

+

例

-
<button>Click</button>
+この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。 -

JavaScript

+### HTML -
const button = document.querySelector('button');
+```html
+
+```
 
-button.addEventListener('click', event => {
-  button.innerHTML = `Click count: ${event.detail}`;
-});
+### JavaScript -

結果

+```js +const button = document.querySelector('button'); -

高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。

+button.addEventListener('click', event => { + button.textContent = `Click count: ${event.detail}`; +}); +``` -

{{EmbedLiveSample("Examples")}}

+### 結果 -

仕様書

+ボタンを素早く何度もクリックしてみて、クリックカウントを増やしましょう。クリックの間に休憩を挟むと、カウントがリセットされます。 - - - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-click')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-click', 'click')}}{{Spec2('DOM3 Events')}}
{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}{{Spec2('DOM2 Events')}}
+{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/auxclick_event", "auxclick")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} +- {{domxref("Element/dblclick_event", "dblclick")}} +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("Element/pointerdown_event", "pointerdown")}} +- {{domxref("Element/pointerup_event", "pointerup")}} diff --git a/files/ja/web/api/element/contextmenu_event/index.md b/files/ja/web/api/element/contextmenu_event/index.md new file mode 100644 index 0000000000..0bfd329580 --- /dev/null +++ b/files/ja/web/api/element/contextmenu_event/index.md @@ -0,0 +1,94 @@ +--- +title: 'Element: contextmenu イベント' +slug: Web/API/Element/contextmenu_event +tags: + - API + - コンテキスト + - DOM + - Element + - イベント + - インターフェイス + - MouseEvent + - リファレンス + - Right Click + - 右クリック + - ボタン + - contextmenu + - メニュー + - マウス +browser-compat: api.Element.contextmenu_event +--- +{{APIRef}} + +**`contextmenu`** イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。 + +後者の場合、コンテキストメニューは、フォーカスされた要素の左下に表示されます。ただし、要素がツリーの場合は、現在の行の左下に表示されます。 + +右クリックイベントが (イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出して) 無効化されていない場合は、対象となる要素で `contextmenu` イベントが発行されます。 + + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{DOMxRef("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}} +
+ +

例

+ +この例では、最初の段落で `contextmenu` イベントが発行されたときに、`preventDefault()` を使って `contextmenu` イベントの既定のアクションをキャンセルしています。その結果、第 1 段落は右クリックしても何も起こらず、第 2 段落にはブラウザーが提供する標準的なコンテキストメニューが表示されることになります。 + +### HTML + +```html +

この段落ではコンテキストメニューが無効になっています。

+

しかし、この段落では無効になっていません。

+``` + +### JavaScript + +```js +const noContext = document.getElementById('noContextMenu'); + +noContext.addEventListener('contextmenu', e => { + e.preventDefault(); +}); +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/auxclick_event", "auxclick")}} +- {{domxref("Element/click_event", "click")}} +- {{domxref("Element/dblclick_event", "dblclick")}} +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("HTMLElement/pointerdown_event", "pointerdown")}} +- {{domxref("HTMLElement/pointerup_event", "pointerup")}} diff --git a/files/ja/web/api/element/dblclick_event/index.md b/files/ja/web/api/element/dblclick_event/index.md index 4f6bd3ee7e..e1fd960112 100644 --- a/files/ja/web/api/element/dblclick_event/index.md +++ b/files/ja/web/api/element/dblclick_event/index.md @@ -5,69 +5,74 @@ tags: - API - DOM - Double Click - - Double-Click + - ダブルクリック - Element - - Event + - イベント - Input - - Interface + - インターフェイス - MouseEvent - - Reference - - button + - リファレンス + - ボタン - dblclick - - events - mouse - - イベント translation_of: Web/API/Element/dblclick_event --- -
{{APIRef}}
+{{APIRef}} -

dblclick イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く二回クリックされたときに発生します。

+**`dblclick`** イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く 2 回クリックされたときに発生します。 -

dblclick は二回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。

+`dblclick` は 2 回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2 組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}} +
-

例

+

例

-

この例では、カードをダブルクリックするたびに寸法が切り替わります。

+この例では、カードをダブルクリックするたびに寸法が切り替わります。 -

JavaScript

+### JavaScript -
const card = document.querySelector('aside');
+```js
+const card = document.querySelector('aside');
 
 card.addEventListener('dblclick', function (e) {
   card.classList.toggle('large');
-});
+}); +``` -

HTML

+### HTML -
<aside>
-  <h3>My Card</h3>
-  <p>Double click to resize this object.</p>
-</aside>
+```html + +``` -

CSS

+### CSS -
aside {
+```css
+aside {
   background: #fe9;
   border-radius: 1em;
   display: inline-block;
@@ -75,48 +80,33 @@ card.addEventListener('dblclick', function (e) {
   transform: scale(.9);
   transform-origin: 0 0;
   transition: transform .6s;
+  user-select: none;
 }
 
 .large {
   transform: scale(1.3);
-}
- -

結果

- -

{{EmbedLiveSample("Examples", 700, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}{{Spec2('DOM3 Events')}}
+} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 700, 200)}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの対応

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/auxclick_event", "auxclick")}} +- {{domxref("Element/click_event", "click")}} +- {{domxref("Element/contextmenu_event", "contextmenu")}} +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{domxref("HTMLElement/pointerdown_event", "pointerdown")}} +- {{domxref("HTMLElement/pointerup_event", "pointerup")}} diff --git a/files/ja/web/api/element/mousedown_event/index.md b/files/ja/web/api/element/mousedown_event/index.md index 5c597f9155..c76d6c6e69 100644 --- a/files/ja/web/api/element/mousedown_event/index.md +++ b/files/ja/web/api/element/mousedown_event/index.md @@ -6,88 +6,68 @@ tags: - DOM - Down - Element - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - Press - - Reference + - リファレンス - UI - - button - - events - - mouse + - ボタン + - マウス - mousedown - - イベント +browser-compat: api.Element.mousedown_event translation_of: Web/API/Element/mousedown_event --- -

{{APIRef}}

+{{APIRef}} -

mousedown イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。

+**`mousedown`** イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。 -
-

注: {{domxref("Element/click_event", "click")}} イベントとの違いは、 click イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 mousedown はボタンが最初に押された時点で発行されます。

-
+> **Note:** {{domxref("Element/click_event", "click")}} イベントとの違いは、 `click` イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 `mousedown` はボタンが最初に押された時点で発行されます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} +
-

例

+## 例 -

{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}

+例のコードについては [`mousemove` イベント](/ja/docs/Web/API/Element/mousemove_event#examples)を参照してください。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}{{Spec2('DOM3 Events')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{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")}} 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 のドキュメントには、 mouseover と mouseenter の間の違いを説明する例があります。

+## 例 -

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")}} diff --git a/files/ja/web/api/element/mouseleave_event/index.md b/files/ja/web/api/element/mouseleave_event/index.md index e98bf28c3b..ff6db4417f 100644 --- a/files/ja/web/api/element/mouseleave_event/index.md +++ b/files/ja/web/api/element/mouseleave_event/index.md @@ -5,92 +5,101 @@ tags: - API - DOM - Element - - Event + - イベント - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mouseleave - move +browser-compat: api.Element.mouseleave_event translation_of: Web/API/Element/mouseleave_event --- -

{{APIRef}}

+{{APIRef}} -

mouseleave イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。

+**`mouseleave`** イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}} +
-

mouseleave と {{event('mouseout')}} はよく似ていますが、 mouseleave はバブリングしないのに対して mouseout はバブリングするという点が異なります。すなわち mouseleave はポインターがその要素およびすべての子孫を出たときに発行されるのに対し、 mouseout はポインターがその要素またはその要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。

+`mouseleave` と {{domxref("Element/mouseout_event", "mouseout")}} はよく似ていますが、 `mouseleave` はバブリングしないのに対して `mouseout` はバブリングするという点が異なります。すなわち `mouseleave` はポインターがその要素*および*すべての子孫を出たときに発行されるのに対し、 `mouseout` はポインターがその要素*または*その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。 -
-
mouseenter.png
+#### `mouseleave` イベントの動作 -

階層内のそれぞれの要素からポインターが出たとき、 mouseleave イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが4つの要素の階層にあるテキストから div が表す領域の外に出ると、4つのイベントが4つの要素に送られます。

+![](mouseleave.png) -
mouseover.png
+階層内のそれぞれの要素からポインターが出たとき、 `mouseleave` イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが 4 つの要素の階層にあるテキストから div が表す領域の外に出ると、4 つのイベントが 4 つの要素に送られます。 -

単一の mouseout イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。

-
+#### `mouseout` イベントの動作 + +![](mouseout.png) + +単一の `mouseout` イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。 -

例

+## 例 -

mouseout のドキュメントには、 mouseout と mouseleave との違いを説明する例があります。

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

mouseleave

+### mouseleave -

次の例では mouseenter イベントを使用して、マウスが <div> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 mouseenter イベントまたは mouseleave イベントの番号を指定してリストに項目を追加します。

+次の例では `mouseenter` イベントを使用して、マウスが `
` に割り当てられた空間に入ったときにその境界線を変更しています。次に、 `mouseenter` イベントまたは `mouseleave` イベントの番号を指定してリストに項目を追加します。 -

HTML

+#### HTML -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
+```html +
+
    + - No events yet! +
+
+``` -

CSS

+#### CSS -

<div> がもっと目立つようにスタイル付けします。

+`
` がもっと目立つようにスタイル付けします。 -
#mouseTarget {
+```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 + '.');
@@ -108,49 +117,31 @@ function addListItem(text) {
 
   // 新しく生成されたリスト項目をリストへ追加
   unorderedList.appendChild(newListItem);
-}
- -

結果

- -

{{EmbedLiveSample('mouseleave')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • イベントの紹介
    • -
  • {{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")}}
    • -
+- [イベントの紹介](/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")}} diff --git a/files/ja/web/api/element/mousemove_event/index.md b/files/ja/web/api/element/mousemove_event/index.md index aa0d3ccddc..70f8212ae1 100644 --- a/files/ja/web/api/element/mousemove_event/index.md +++ b/files/ja/web/api/element/mousemove_event/index.md @@ -4,73 +4,78 @@ slug: Web/API/Element/mousemove_event tags: - API - DOM - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference - - events - - mouse + - リファレンス + - マウス - mousemove - move - - pointer + - ポインター translation_of: Web/API/Element/mousemove_event --- -

{{APIRef}}

+{{APIRef}} -

mousemove イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。

+`mousemove` イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} +
-

例

+

例

-

次の例は、 {{domxref("Element/mousedown_event", "mousedown")}}, mousemove, and {{domxref("Element/mouseup_event", "mouseup")}} イベントを使って HTML5 の要素である canvas の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。

+次の例は、{{domxref("Element/mousedown_event", "mousedown")}}、`mousemove`、{{domxref("Element/mouseup_event", "mouseup")}} の各イベントを使って HTML5 の要素である [canvas](/ja/docs/Web/API/Canvas_API) の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。 -

ページが読み込まれると、定数 myPics と context が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。

+ページが読み込まれると、定数 `myPics` と `context` が、それぞれ canvas と描画に使用する 2D コンテキストの参照を格納するために生成されます。 -

mousedown イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 x と y に格納され、フラグ isDrawing の値が true になります。

+`mousedown` イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 `x` と `y` に格納され、フラグ `isDrawing` の値が true になります。 -

ページ上でマウスを動かすと、 mousemove イベントが発行されます。 isDrawing が true である場合、 drawLine 関数を呼び出して x と y に格納された値から現在の位置まで線を引きます。

+ページ上でマウスを動かすと、 `mousemove` イベントが発行されます。 `isDrawing` が true である場合、 `drawLine` 関数を呼び出して `x` と `y` に格納された値から現在の位置まで線を引きます。 -

drawLine() 関数の返値は、座標を再調整して x と y に保存します。

+`drawLine()` 関数の返値は、座標を再調整して `x` と `y` に保存します。 -

mouseup イベントで線の最後の区間を描画し、 x と y をそれぞれを 0 に設定し、その後の描画を止めるために isDrawing を false に設定します。

+`mouseup` イベントで線の最後の区間を描画し、 `x` と `y` をそれぞれを `0` に設定し、その後の描画を止めるために `isDrawing` を `false` に設定します。 -

HTML

+### HTML -
<h1>マウスイベントを使ったお絵かき</h1>
-<canvas id="myPics" width="560" height="360"></canvas>
-
+```html +

マウスイベントを使ったお絵かき

+ +``` -

CSS

+### CSS -
canvas {
+```css
+canvas {
   border: 1px solid black;
   width: 560px;
   height: 360px;
-}
+} +``` -

JavaScript

+### JavaScript -
// isDrawing が真のとき、マウスを動かすと線を描く
+```js
+// 真のとき、マウスを動かすと線を描く
 let isDrawing = false;
 let x = 0;
 let y = 0;
@@ -81,13 +86,13 @@ const context = myPics.getContext('2d');
 // event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。
 
 // mousedown, mousemove, mouseup にイベントリスナーを追加
-myPics.addEventListener('mousedown', e => {
+myPics.addEventListener('mousedown', e => {
   x = e.offsetX;
   y = e.offsetY;
   isDrawing = true;
 });
 
-myPics.addEventListener('mousemove', e => {
+myPics.addEventListener('mousemove', e => {
   if (isDrawing === true) {
     drawLine(context, x, y, e.offsetX, e.offsetY);
     x = e.offsetX;
@@ -95,7 +100,7 @@ myPics.addEventListener('mousemove', e => {
   }
 });
 
-window.addEventListener('mouseup', e => {
+window.addEventListener('mouseup', e => {
   if (isDrawing === true) {
     drawLine(context, x, y, e.offsetX, e.offsetY);
     x = 0;
@@ -112,48 +117,30 @@ function drawLine(context, x1, y1, x2, y2) {
   context.lineTo(x2, y2);
   context.stroke();
   context.closePath();
-}
- -

結果

- -

{{EmbedLiveSample("Examples", 640, 450)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 640, 450)}} + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • イベントの紹介
    • -
  • {{domxref("Element/mousedown_event", "mousedown")}}
    • -
  • {{domxref("Element/mouseup_event", "mouseup")}}
    • -
  • {{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")}}
    • -
+- [イベントの紹介](/ja/docs/Learn/JavaScript/Building_blocks/Events) +- {{domxref("Element/mousedown_event", "mousedown")}} +- {{domxref("Element/mouseup_event", "mouseup")}} +- {{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")}} 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 +
    +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +
+``` -

JavaScript

+#### JavaScript -
let test = document.getElementById("test");
+```js
+let test = document.getElementById("test");
 
-// マウスが <ul> を出るとリストを一時的に紫色にします
-// ときに1度だけ実行されます
+// マウスが 
     を出るとリストを一時的に紫色にします
+// ときに 1 度だけ実行されます
 test.addEventListener("mouseleave", function( event ) {
   // mouseleave の対象を強調
   event.target.style.color = "purple";
@@ -76,7 +80,7 @@ test.addEventListener("mouseleave", function( event ) {
   }, 1000);
 }, false);
 
-// マウスが出ると <li> を一時的にオレンジ色にします
+// マウスが出ると-  を一時的にオレンジ色にします
 test.addEventListener("mouseout", function( event ) {
   // mouseout の対象を強調
   event.target.style.color = "orange";
@@ -85,48 +89,30 @@ test.addEventListener("mouseout", function( event ) {
   setTimeout(function() {
     event.target.style.color = "";
   }, 500);
-}, false);
- -

結果

- -

{{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)}} -

関連情報

+## 仕様書 -
    -
  • イベントの紹介
    • -
  • {{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")}}
    • -
+{{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")}} 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 +
    +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +
+``` -

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')}} -

関連情報

+## 仕様書 -
    -
  • イベントの紹介
    • -
  • {{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")}}
    • -
+{{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")}} diff --git a/files/ja/web/api/element/mouseup_event/index.md b/files/ja/web/api/element/mouseup_event/index.md index 982fd32c95..2c037e0894 100644 --- a/files/ja/web/api/element/mouseup_event/index.md +++ b/files/ja/web/api/element/mouseup_event/index.md @@ -4,87 +4,70 @@ slug: Web/API/Element/mouseup_event tags: - API - DOM - - Event - - Interface + - イベント + - インターフェイス - MouseEvent - - Reference + - リファレンス - Release - UI - Up - - button - - events - - mouse - - mouseup - - イベント + - ボタン - マウス + - mouseup +browser-compat: api.Element.mouseup_event translation_of: Web/API/Element/mouseup_event --- -
{{APIRef}}
+{{APIRef}} + +**`mouseup`** イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが離されたときに発生します。 -

mouseup イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが離されたときに発生します。 mouseup イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。

+`mouseup` イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ + {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} +
-

例

+## 例 -

{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}

+サンプルコードは [`mousemove` イベント](/ja/docs/Web/API/Element/mousemove_event#examples)を参照してください。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}{{Spec2('DOM3 Events')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • イベントの紹介
    • -
  • {{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")}}
    • -
+- [イベントの紹介](/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