diff options
| -rw-r--r-- | files/ja/web/api/element/auxclick_event/index.md | 141 | ||||
| -rw-r--r-- | files/ja/web/api/element/click_event/index.md | 192 | ||||
| -rw-r--r-- | files/ja/web/api/element/contextmenu_event/index.md | 94 | ||||
| -rw-r--r-- | files/ja/web/api/element/dblclick_event/index.md | 144 | ||||
| -rw-r--r-- | files/ja/web/api/element/mousedown_event/index.md | 112 | ||||
| -rw-r--r-- | files/ja/web/api/element/mouseenter_event/index.md | 189 | ||||
| -rw-r--r-- | files/ja/web/api/element/mouseleave_event/index.md | 179 | ||||
| -rw-r--r-- | files/ja/web/api/element/mousemove_event/index.md | 159 | ||||
| -rw-r--r-- | files/ja/web/api/element/mouseout_event/index.md | 156 | ||||
| -rw-r--r-- | files/ja/web/api/element/mouseover_event/index.md | 144 | ||||
| -rw-r--r-- | files/ja/web/api/element/mouseup_event/index.md | 113 |
11 files changed, 863 insertions, 760 deletions
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")}} イベントが発生した後に、順に発生します。 + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onauxclick", "onauxclick")}} + </td> + </tr> + </tbody> +</table> + +## 既定のアクションの抑止 + +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")}} イベントの既定の動作を防止することで実現できます。 + +<h2 id="Examples">例</h2> + +この例では、 {{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 +<button><h1>Click me!</h1></button> +``` + +```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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><code><strong>click</strong></code> イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。</span></p> +**`click`** イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。 <table class="properties"> - <tbody> - <tr> - <th>バブリング</th> - <td>あり</td> - </tr> - <tr> - <th>キャンセル</th> - <td>可</td> - </tr> - <tr> - <th>インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th>イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onclick", "onclick")}} + </td> + </tr> + </tbody> </table> -<p>ボタンが要素上で押された後、離される前に要素の外側に移動した場合は、イベントは両方の要素を含む最も近い祖先要素で発生します。</p> +ある要素でボタンが押され、ボタンが離される前にポインタが要素の外に移動した場合、イベントは両方の要素を含む最も具体的な祖先の要素で発生します。 -<p><code>click</code> は {{event("mousedown")}} および {{event("mouseup")}} イベントの後に、順番通りに発生します。</p> +`click` は {{domxref("Element/mousedown_event", "mousedown")}} および {{domxref("Element/mouseup_event", "mouseup")}} イベントの後、順番通りに発生します。 -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +## 使用上の注意 -<p><code>click</code> のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("Event.detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は <code>detail</code> が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。</p> +`click` のイベントハンドラーに渡される {{domxref("MouseEvent")}} オブジェクトの {{domxref("UIEvent/detail", "detail")}} プロパティには、 {{domxref("Event.target", "target")}} がクリックされた回数が設定されています。言い換えれば、ダブルクリックの場合は `detail` が 2 になり、トリプルクリックの場合は 3 になります。このカウンターは、クリックが発生しない短い間隔の後にリセットされます。この間隔の長さの詳細は、ブラウザーやプラットフォームによって異なります。この間隔は、ユーザーの設定によっても影響を受ける可能性があります。例えば、アクセシビリティのオプションは、適応性のあるインターフェイスで複数回のクリックを簡単に実行できるように、この間隔を延長することができます。 -<h3 id="Internet_Explorer">Internet Explorer</h3> +### Internet Explorer -<p>Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> である要素が他の要素の上に重なった時、 <code>click</code> イベントを受け取らないというバグに悩まされていました。すべての <code>click</code> イベントはその下にある要素で発生していました。<a href="http://jsfiddle.net/YUKma/show/">このライブサンプル</a>を参照してください。</p> +Internet Explorer 8 と 9 は、 {{cssxref("background-color")}} の計算値が [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) である要素が他の要素の上に重なった時、 `click` イベントを受け取らないというバグに悩まされていました。すべての `click` イベントはその下にある要素で発生していました。[このライブサンプル](http://jsfiddle.net/YUKma/show/)を参照してください。 -<p>このバグの知られている回避方法は以下の通りです。</p> +このバグの知られている回避方法は以下の通りです。 -<ul> - <li>IE9 のみの場合: - <ul> - <li>{{cssxref("background-color")}}<code>: <a href="/ja/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code> に設定する</li> - <li>{{cssxref("opacity")}}<code>: 0</code> に設定し、 {{cssxref("background-color")}} を明示的に <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> 以外に設定する</li> - </ul> - </li> - <li>IE8 および IE9 の場合: <code><a href="http://msdn.microsoft.com/ja/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> に設定し、 {{cssxref("background-color")}} を明示的に <a href="/ja/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> 以外に設定する</li> -</ul> +- IE9 のみの場合: -<h3 id="Safari_Mobile">Safari Mobile</h3> + - {{cssxref("background-color")}}`: rgba(0,0,0,0)` に設定する + - {{cssxref("opacity")}}`: 0` に設定し、{{cssxref("background-color")}} を明示的に [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) 以外に設定する -<p>Safari Mobile 7.0 以降では (おそらくそれ以前のバージョンも) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">悩ましいバグ</a>があり、通常は対話型ではない要素 ({{HTMLElement("div")}} など) で、イベントリスナーが要素自身に直接設定されていない場合 (つまり、 <a href="http://davidwalsh.name/event-delegate">イベントの委譲</a>が使用されている場合) に <code>click</code> イベントが発生しません。デモは<a href="http://jsfiddle.net/cvrhulu/k9t0sdnf/show/">このライブ例</a>を参照してください。 <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">Safari's docs on making elements clickable</a> および <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">definition of "clickable element"</a> も参照してください。</p> +- IE8 および IE9 の場合: filter: alpha(opacity=0);` に設定し、 {{cssxref("background-color")}} を明示的に [`transparent`](/ja/docs/Web/CSS/color_value#transparent_keyword) 以外に設定する -<p>このバグの知られている回避策は以下のとおりです。</p> +## Safari Mobile -<ul> - <li>要素およびそのすべての祖先に {{cssxref("cursor")}}<code>: pointer;</code> を設定する。</li> - <li>要素または {{HTMLElement("body")}} 以外の祖先のいずれかに、ダミーの <code>onclick="void(0)"</code> 属性を設定する。</li> - <li>通常は対話型になる要素 (例えば {{HTMLElement("a")}}) を、通常は対話型でない要素 (例えば {{HTMLElement("div")}}) の代わりに使用する。</li> - <li><code>click</code> <a href="https://davidwalsh.name/event-delegate">イベントの委譲</a>の使用をやめる。</li> -</ul> +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) も参照してください。 -<p>Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。</p> +このバグの知られている回避策は以下のとおりです。 -<ul> - <li>{{HTMLElement("a")}} (ただし <code>href</code> があるものに限る)</li> - <li>{{HTMLElement("area")}} (ただし <code>href</code> があるものに限る)</li> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("img")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("label")}} (ただしフォームコントロールに関連付けられているものに限る)</li> - <li>{{HTMLElement("textarea")}}</li> - <li><em>このリストは不完全です。試験や調査を行って展開することで MDN にご協力ください。</em></li> -</ul> +- その要素およびそのすべての祖先に {{cssxref("cursor")}}`: pointer;` を設定する。 +- ダミーの `onclick="void(0)"` 属性を、その要素または {{HTMLElement("body")}} 以外の祖先のいずれかに設定する。 +- 通常は対話型になる要素 (例えば {{HTMLElement("a")}}) を、通常は対話型でない要素 (例えば {{HTMLElement("div")}}) の代わりに使用する。 +- `click` [イベントの委譲](https://davidwalsh.name/event-delegate)の使用をやめる。 -<h2 id="Examples" name="Examples">例</h2> +Safari Mobile は以下の要素を通常対話型であるとみなします (したがって、このバグの影響を受けません)。 -<p>この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。</p> +- {{HTMLElement("a")}} (ただし `href` があるものに限る) +- {{HTMLElement("area")}} (ただし `href` があるものに限る) +- {{HTMLElement("button")}} +- {{HTMLElement("img")}} +- {{HTMLElement("input")}} +- {{HTMLElement("label")}} (ただしフォームコントロールに関連付けられているものに限る) +- {{HTMLElement("textarea")}} +- _このリストは不完全です。試験や調査を行って展開することで MDN にご協力ください。_ -<h3 id="HTML">HTML</h3> +<h2 id="Examples">例</h2> -<pre class="brush: html notranslate"><button>Click</button></pre> +この例は {{HtmlElement("button")}} を連続してクリックした数を表示します。 -<h3 id="JavaScript">JavaScript</h3> +### HTML -<pre class="brush: js notranslate">const button = document.querySelector('button'); +```html +<button>Click</button> +``` -button.addEventListener('click', event => { - button.innerHTML = `Click count: ${event.detail}`; -});</pre> +### JavaScript -<h3 id="Result" name="Result">結果</h3> +```js +const button = document.querySelector('button'); -<p>高速にするために、繰り返してボタンをクリックするとクリックカウントを増加させます。クリック間に休みが入った場合は、カウントがリセットされます。</p> +button.addEventListener('click', event => { + button.textContent = `Click count: ${event.detail}`; +}); +``` -<p>{{EmbedLiveSample("Examples")}}</p> +### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +ボタンを素早く何度もクリックしてみて、クリックカウントを増やしましょう。クリックの間に休憩を挟むと、カウントがリセットされます。 -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-click')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - </tr> - </tbody> -</table> +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Element.click_event")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{event("auxclick")}}</li> - <li>{{event("contextmenu")}}</li> - <li>{{event("dblclick")}}</li> - <li>{{event("mousedown")}}</li> - <li>{{event("mouseup")}}</li> - <li>{{event("pointerdown")}}</li> - <li>{{event("pointerup")}}</li> -</ul> +- [イベントの紹介](/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` イベントが発行されます。 + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{DOMxRef("MouseEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}} + </td> + </tr> + </tbody> +</table> + +<h2 id="Examples">例</h2> + +この例では、最初の段落で `contextmenu` イベントが発行されたときに、`preventDefault()` を使って `contextmenu` イベントの既定のアクションをキャンセルしています。その結果、第 1 段落は右クリックしても何も起こらず、第 2 段落にはブラウザーが提供する標準的なコンテキストメニューが表示されることになります。 + +### HTML + +```html +<p id="noContextMenu">この段落ではコンテキストメニューが無効になっています。</p> +<p>しかし、この段落では無効になっていません。</p> +``` + +### 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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><strong><code>dblclick</code></strong> イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く二回クリックされたときに発生します。</span></p> +**`dblclick`** イベントは、ポインティングデバイスのボタン (マウスの第一ボタンなど) がダブルクリックされたとき、つまり、単一の要素上でとても短い時間内に素早く 2 回クリックされたときに発生します。 -<p><code>dblclick</code> は二回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。</p> +`dblclick` は 2 回の {{domxref("Element/click_event", "click")}} イベントの後 (展開すると、2 組の {{domxref("Element.mousedown_event", "mousedown")}} および {{domxref("Element.mouseup_event", "mouseup")}} の後) に発生します。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル可能</th> - <td>はい</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p>この例では、カードをダブルクリックするたびに寸法が切り替わります。</p> +この例では、カードをダブルクリックするたびに寸法が切り替わります。 -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">const card = document.querySelector('aside'); +```js +const card = document.querySelector('aside'); card.addEventListener('dblclick', function (e) { card.classList.toggle('large'); -});</pre> +}); +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><aside> - <h3>My Card</h3> - <p>Double click to resize this object.</p> -</aside></pre> +```html +<aside> + <h3>My Card</h3> + <p>Double click to resize this object.</p> +</aside> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: 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); -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", 700, 200)}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 700, 200)}} + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Element.dblclick_event")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/auxclick_event", "auxclick")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/pointerdown_event", "pointerdown")}}</li> - <li>{{domxref("Element/pointerup_event", "pointerup")}}</li> -</ul> +- [イベントの紹介](/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 --- -<p>{{APIRef}}</p> +{{APIRef}} -<p><strong><code>mousedown</code></strong> イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。</p> +**`mousedown`** イベントは、ポインターが要素の中にあるときにポインティングデバイスのボタンが押下されたときに {{domxref("Element")}} に発行されます。 -<div class="blockIndicator note"> -<p><strong>注:</strong> {{domxref("Element/click_event", "click")}} イベントとの違いは、 <code>click</code> イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 <code>mousedown</code> はボタンが最初に押された時点で発行されます。</p> -</div> +> **Note:** {{domxref("Element/click_event", "click")}} イベントとの違いは、 `click` イベントが完全なクリック操作の後、つまり、同じ要素内でマウスのボタンが押されて離された後で発行されることです。 `mousedown` はボタンが最初に押された時点で発行されます。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}</p> +例のコードについては [`mousemove` イベント](/ja/docs/Web/API/Element/mousemove_event#examples)を参照してください。 -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Element.mousedown_event")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +- [イベントの紹介](/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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><strong><code>mouseenter</code></strong> イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。</span></p> +**`mouseenter`** イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発行された要素の中に移動したときに {{domxref("Element")}} に発行されます。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>なし</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>不可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}} + </td> + </tr> + </tbody> </table> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +## 使用上の注意 + +`mouseenter` は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、[バブリング](/ja/docs/Web/API/Event/bubbles)しない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。 -<p><code>mouseenter</code> は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、<a href="/ja/docs/Web/API/Event/bubbles">バブリング</a>しない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。</p> +#### `mouseenter` イベントの動作 -<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> -<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div> -要素の階層に入った場合、それぞれの要素に1つずつ <code>mouseenter</code> が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 + +要素の階層に入った場合、それぞれの要素に 1 つずつ `mouseenter` が送信されます。ここでポインターがテキストに達した時、階層の 4 つの要素に 4 つのイベントが送信されます。 -<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div> -DOM ツリーの最も深い要素に1つの <code>mouseover</code> イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。</div> +#### `mouseover` イベントの動作 -<p>深い階層では、数多くの <code>mouseenter</code> イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は <code>mouseover</code> イベントを待ち受けした方が優れています。</p> + +DOM ツリーの最も深い要素に 1 つの `mouseover` イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。</div> -<p>対応する (マウスがコンテンツ領域から出たときに要素に発生する) <code>mouseleave</code> と組み合わせると、 <code>mouseenter</code> イベントは CSS の {{cssxref(':hover')}} 疑似クラスととても似た方法で動作します。</p> +深い階層では、数多くの `mouseenter` イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は `mouseover` イベントを待ち受けした方が優れています。 -<h2 id="Examples" name="Examples">例</h2> +対応する (マウスがコンテンツ領域から出たときに要素に発生する) `mouseleave` と組み合わせると、 `mouseenter` イベントは CSS の {{cssxref(':hover')}} 擬似クラスととても似た方法で動作します。 -<p><a href="/ja/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> のドキュメントには、 <code>mouseover</code> と <code>mouseenter</code> の間の違いを説明する例があります。</p> +## 例 -<h3 id="mouseenter">mouseenter</h3> +[`mouseover`](/ja/docs/Web/API/Element/mouseover_event#example) のドキュメントには、 `mouseover` と `mouseenter` の間の違いを説明する例があります。 -<p>以下は端的な例ですが、 <code>mouseenter</code> イベントを使用して、マウスが割り当てられた空間に入ったときに <code>div</code> の境界を変化させます。そして、リストに <code>mouseenter</code> または <code>mouseleave</code> イベントの回数を示す項目を追加します。</p> +### mouseenter -<h4 id="HTML">HTML</h4> +以下は端的な例ですが、 `mouseenter` イベントを使用して、マウスが割り当てられた空間に入ったときに `div` の境界を変化させます。そして、リストに `mouseenter` または `mouseleave` イベントの回数を示す項目を追加します。 -<pre class="brush: html"><div id='mouseTarget'> - <ul id="unorderedList"> - <li>No events yet!</li> - </ul> -</div></pre> +#### HTML -<h4 id="CSS">CSS</h4> +```html +<div id='mouseTarget'> + <ul id="unorderedList"> + <li>No events yet!</li> + </ul> +</div> +``` -<p><code>div</code> を整形してもっと目立つようにします。</p> +#### CSS -<pre class="brush: css">#mouseTarget { +`div` を整形してもっと目立つようにします。 + +```css +#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; -}</pre> +} +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">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); -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('mouseenter')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### 結果 + +{{EmbedLiveSample('mouseenter')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Element.mouseenter_event")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +- [イベントの紹介](/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 --- -<p>{{APIRef}}</p> +{{APIRef}} -<p><span class="seoSummary"><strong><code>mouseleave</code></strong> イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。</span></p> +**`mouseleave`** イベントは、ポインティングデバイス (ふつうはマウス) のカーソルが {{domxref("Element")}} 外に移動したときに発行されます。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>なし</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>不可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}} + </td> + </tr> + </tbody> </table> -<p><code>mouseleave</code> と {{event('mouseout')}} はよく似ていますが、 <code>mouseleave</code> はバブリングしないのに対して <code>mouseout</code> はバブリングするという点が異なります。すなわち <code>mouseleave</code> はポインターがその要素<em>および</em>すべての子孫を出たときに発行されるのに対し、 <code>mouseout</code> はポインターがその要素<em>または</em>その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。</p> +`mouseleave` と {{domxref("Element/mouseout_event", "mouseout")}} はよく似ていますが、 `mouseleave` はバブリングしないのに対して `mouseout` はバブリングするという点が異なります。すなわち `mouseleave` はポインターがその要素*および*すべての子孫を出たときに発行されるのに対し、 `mouseout` はポインターがその要素*または*その要素の子孫のうちの一つを出たときに (ポインターがまだその要素内にあったとしても) 発行されます。 -<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;"> -<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5910/=mouseleave.png"></div> +#### `mouseleave` イベントの動作 -<p>階層内のそれぞれの要素からポインターが出たとき、 <code>mouseleave</code> イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが4つの要素の階層にあるテキストから div が表す領域の外に出ると、4つのイベントが4つの要素に送られます。</p> + -<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5911/=mouseout.png"></div> +階層内のそれぞれの要素からポインターが出たとき、 `mouseleave` イベントが一つずつそれぞれの要素に送られます。ここで、ポインターが 4 つの要素の階層にあるテキストから div が表す領域の外に出ると、4 つのイベントが 4 つの要素に送られます。 -<p>単一の <code>mouseout</code> イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。</p> -</div> +#### `mouseout` イベントの動作 + + + +単一の `mouseout` イベントが DOM ツリーの最も深い要素に送信され、ハンドラーによって取り消されるかルートに達するまで、上にバブリングしていきます。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p><a href="/ja/docs/Web/API/Element/mouseout_event#Examples"><code>mouseout</code></a> のドキュメントには、 <code>mouseout</code> と <code>mouseleave</code> との違いを説明する例があります。</p> +[`mouseout`](/ja/docs/Web/API/Element/mouseout_event#examples) のドキュメントには、 `mouseout` と `mouseleave` との違いを説明する例があります。 -<h3 id="mouseleave">mouseleave</h3> +### mouseleave -<p>次の例では <code>mouseenter</code> イベントを使用して、マウスが <code><div></code> に割り当てられた空間に入ったときにその境界線を変更しています。次に、 <code>mouseenter</code> イベントまたは <code>mouseleave</code> イベントの番号を指定してリストに項目を追加します。</p> +次の例では `mouseenter` イベントを使用して、マウスが `<div>` に割り当てられた空間に入ったときにその境界線を変更しています。次に、 `mouseenter` イベントまたは `mouseleave` イベントの番号を指定してリストに項目を追加します。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div id='mouseTarget'> - <ul id="unorderedList"> - <li>No events yet!</li> - </ul> -</div></pre> +```html +<div id='mouseTarget'> + <ul id="unorderedList"> + - No events yet! + </ul> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<p><code><div></code> がもっと目立つようにスタイル付けします。</p> +`<div>` がもっと目立つようにスタイル付けします。 -<pre class="brush: css notranslate">#mouseTarget { +```css +#mouseTarget { box-sizing: border-box; width:15rem; border:1px solid #333; -}</pre> +} +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js notranslate">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); -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('mouseleave')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +} +``` + +#### 結果 + +{{EmbedLiveSample('mouseleave')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Element.mouseleave_event")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +- [イベントの紹介](/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 --- -<p>{{APIRef}}</p> +{{APIRef}} -<p><span class="seoSummary"><code>mousemove</code> イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。</span></p> +`mousemove` イベントは、マウスなどのポインティングデバイスで、カーソルのホットスポットが要素内にある間に動いた時に発行されるイベントです。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p>次の例は、 {{domxref("Element/mousedown_event", "mousedown")}}, <code>mousemove</code>, and {{domxref("Element/mouseup_event", "mouseup")}} イベントを使って HTML5 の要素である <a href="/ja/docs/Web/API/Canvas_API">canvas</a> の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。</p> +次の例は、{{domxref("Element/mousedown_event", "mousedown")}}、`mousemove`、{{domxref("Element/mouseup_event", "mouseup")}} の各イベントを使って HTML5 の要素である [canvas](/ja/docs/Web/API/Canvas_API) の上にお絵かきができるものです。機能は単純で、線の太さは 1、線の色は黒に固定されています。 -<p>ページが読み込まれると、定数 <code>myPics</code> と <code>context</code> が、それぞれ canvas と描画に使用する 2d context の参照を格納するために生成されます。</p> +ページが読み込まれると、定数 `myPics` と `context` が、それぞれ canvas と描画に使用する 2D コンテキストの参照を格納するために生成されます。 -<p><code>mousedown</code> イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 <code>x</code> と <code>y</code> に格納され、フラグ <code>isDrawing</code> の値が true になります。</p> +`mousedown` イベントが発行されると線の描画が始まります。まずマウスの x 座標と y 座標が変数 `x` と `y` に格納され、フラグ `isDrawing` の値が true になります。 -<p>ページ上でマウスを動かすと、 <code>mousemove</code> イベントが発行されます。 <code>isDrawing</code> が true である場合、 <code>drawLine</code> 関数を呼び出して <code>x</code> と <code>y</code> に格納された値から現在の位置まで線を引きます。</p> +ページ上でマウスを動かすと、 `mousemove` イベントが発行されます。 `isDrawing` が true である場合、 `drawLine` 関数を呼び出して `x` と `y` に格納された値から現在の位置まで線を引きます。 -<p><code>drawLine()</code> 関数の返値は、座標を再調整して <code>x</code> と <code>y</code> に保存します。</p> +`drawLine()` 関数の返値は、座標を再調整して `x` と `y` に保存します。 -<p><code>mouseup</code> イベントで線の最後の区間を描画し、 <code>x</code> と <code>y</code> をそれぞれを <code>0</code> に設定し、その後の描画を止めるために <code>isDrawing</code> を <code>false</code> に設定します。</p> +`mouseup` イベントで線の最後の区間を描画し、 `x` と `y` をそれぞれを `0` に設定し、その後の描画を止めるために `isDrawing` を `false` に設定します。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><h1>マウスイベントを使ったお絵かき</h1> -<canvas id="myPics" width="560" height="360"></canvas> -</pre> +```html +<h1>マウスイベントを使ったお絵かき</h1> +<canvas id="myPics" width="560" height="360"></canvas> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">canvas { +```css +canvas { border: 1px solid black; width: 560px; height: 360px; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js notranslate">// 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(); -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples", 640, 450)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 640, 450)}} + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Element.mousemove_event")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +- [イベントの紹介](/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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><strong><code>mouseout</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。</span> <code>mouseout</code> は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。</p> +**`mouseout`** イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 + +`mouseout` は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>以下の例は <code>mouseout</code> イベントの使い方を示しています。</p> +以下の例は `mouseout` イベントの使い方を示しています。 -<h3 id="mouseout_と_mouseleave">mouseout と mouseleave</h3> +<h3 id="mouseout_and_mouseleave">mouseout と mouseleave</h3> -<p>以下の例は、 <code>mouseout</code> と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 <code>mouseleave</code> イベントを {{HTMLElement("ul")}} に追加し、マウスが <code><ul></code> を出るたびにリストを紫色に着色するようにします。 <code>mouseout</code> をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。</p> +以下の例は、`mouseout` と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。`mouseleave` イベントを {{HTMLElement("ul")}} に追加し、マウスが `<ul>` を出るたびにリストを紫色に着色するようにします。`mouseout` をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。 -<p>これを試してみると、 <code>mouseout</code> はそれぞれのリスト項目に配信されるのに対し、 <code>mouseleave</code> は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <code><ul></code> を不明瞭にします。</p> +これを試してみると、`mouseout` はそれぞれのリスト項目に配信されるのに対し、 `mouseleave` は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある `<ul>` を不明瞭にします。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><ul id="test"> - <li>item 1</li> - <li>item 2</li> - <li>item 3</li> -</ul> -</pre> +```html +<ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js notranslate">let test = document.getElementById("test"); +```js +let test = document.getElementById("test"); -// マウスが <ul> を出るとリストを一時的に紫色にします -// ときに1度だけ実行されます +// マウスが <ul> を出るとリストを一時的に紫色にします +// ときに 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);</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +}, false); +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +#### 結果 -<p>{{Compat("api.Element.mouseout_event")}}</p> +{{EmbedLiveSample("mouseout_and_mouseleave", 640, 200)}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 仕様書 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +{{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 --- -<div>{{APIRef}}</div> +{{APIRef}} -<p><span class="seoSummary"><strong><code>mouseover</code></strong> イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。</span></p> +**`mouseover`** イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<p>以下の例は、 <code>mouseover</code> と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。</p> +以下の例は、`mouseover` と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。 -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><ul id="test"> - <li>item 1</li> - <li>item 2</li> - <li>item 3</li> -</ul> -</pre> +```html +<ul id="test"> + <li>item 1</li> + <li>item 2</li> + <li>item 3</li> +</ul> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js notranslate">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);</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +}, false); +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +### 結果 -<p>{{Compat("api.Element.mouseover_event")}}</p> +{{EmbedLiveSample('Examples')}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 仕様書 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +{{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 --- -<div>{{APIRef}}</div> +{{APIRef}} + +**`mouseup`** イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが離されたときに発生します。 -<p><span class="seoSummary"><strong><code>mouseup</code></strong> イベントは、 {{domxref("Element")}} においてポインターが中にあるときにポインティングデバイス (マウスやトラックパッドなど) のボタンが離されたときに発生します。</span> <code>mouseup</code> イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。</p> +`mouseup` イベントは {{domxref("Element.mousedown_event", "mousedown")}} イベントに対応します。 <table class="properties"> - <tbody> - <tr> - <th scope="row">バブリング</th> - <td>あり</td> - </tr> - <tr> - <th scope="row">キャンセル</th> - <td>可</td> - </tr> - <tr> - <th scope="row">インターフェイス</th> - <td>{{domxref("MouseEvent")}}</td> - </tr> - <tr> - <th scope="row">イベントハンドラープロパティ</th> - <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MouseEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td> + {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} + </td> + </tr> + </tbody> </table> -<h2 id="Examples" name="Examples">例</h2> +## 例 -<p>{{page("/ja/docs/Web/API/Element/mousemove_event", "Examples")}}</p> +サンプルコードは [`mousemove` イベント](/ja/docs/Web/API/Element/mousemove_event#examples)を参照してください。 -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - </tr> - </thead> - <thead> - <tr> - <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </thead> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Element.mouseup_event")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li> - <li>{{domxref("Element/mousedown_event", "mousedown")}}</li> - <li>{{domxref("Element/mouseup_event", "mouseup")}}</li> - <li>{{domxref("Element/mousemove_event", "mousemove")}}</li> - <li>{{domxref("Element/click_event", "click")}}</li> - <li>{{domxref("Element/dblclick_event", "dblclick")}}</li> - <li>{{domxref("Element/mouseover_event", "mouseover")}}</li> - <li>{{domxref("Element/mouseout_event", "mouseout")}}</li> - <li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li> - <li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li> - <li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li> -</ul> +- [イベントの紹介](/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")}} |