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/click_event/index.md | 192 +++++++++++--------------- 1 file changed, 83 insertions(+), 109 deletions(-) (limited to 'files/ja/web/api/element/click_event') 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")}} -- cgit v1.2.3-54-g00ecf