From 98486b8f245c075a3411d0ce36651a55f525f45a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Oct 2021 02:20:39 +0900 Subject: Element のマウスイベントを追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/click_event/index.html | 158 --------------------- files/ja/web/api/element/click_event/index.md | 158 +++++++++++++++++++++ files/ja/web/api/element/dblclick_event/index.html | 122 ---------------- files/ja/web/api/element/dblclick_event/index.md | 122 ++++++++++++++++ 4 files changed, 280 insertions(+), 280 deletions(-) delete mode 100644 files/ja/web/api/element/click_event/index.html create mode 100644 files/ja/web/api/element/click_event/index.md delete mode 100644 files/ja/web/api/element/dblclick_event/index.html create mode 100644 files/ja/web/api/element/dblclick_event/index.md (limited to 'files') diff --git a/files/ja/web/api/element/click_event/index.html b/files/ja/web/api/element/click_event/index.html deleted file mode 100644 index 742d591101..0000000000 --- a/files/ja/web/api/element/click_event/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: 'Element: click イベント' -slug: Web/API/Element/click_event -tags: - - API - - DOM - - Element - - Event - - Interface - - MouseEvent - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - Reference - - UI - - click - - events - - mouse - - イベント - - インターフェイス - - マウス -translation_of: Web/API/Element/click_event ---- -
{{APIRef}}
- -

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

- - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onclick", "onclick")}}
- -

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

- -

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

- -

使用上の注意

- -

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

- -

Internet Explorer

- -

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

- -

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

- - - -

Safari Mobile

- -

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

- -

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

- - - -

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

- - - -

例

- -

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

- -

HTML

- -
<button>Click</button>
- -

JavaScript

- -
const button = document.querySelector('button');
-
-button.addEventListener('click', event => {
-  button.innerHTML = `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')}}
- -

ブラウザーの互換性

- -

{{Compat("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 new file mode 100644 index 0000000000..742d591101 --- /dev/null +++ b/files/ja/web/api/element/click_event/index.md @@ -0,0 +1,158 @@ +--- +title: 'Element: click イベント' +slug: Web/API/Element/click_event +tags: + - API + - DOM + - Element + - Event + - Interface + - MouseEvent + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - UI + - click + - events + - mouse + - イベント + - インターフェイス + - マウス +translation_of: Web/API/Element/click_event +--- +
{{APIRef}}
+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onclick", "onclick")}}
+ +

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

+ +

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

+ +

使用上の注意

+ +

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

+ +

Internet Explorer

+ +

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

+ +

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

+ + + +

Safari Mobile

+ +

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

+ +

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

+ + + +

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

+ + + +

例

+ +

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

+ +

HTML

+ +
<button>Click</button>
+ +

JavaScript

+ +
const button = document.querySelector('button');
+
+button.addEventListener('click', event => {
+  button.innerHTML = `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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/dblclick_event/index.html b/files/ja/web/api/element/dblclick_event/index.html deleted file mode 100644 index 4f6bd3ee7e..0000000000 --- a/files/ja/web/api/element/dblclick_event/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 'Element: dblclick イベント' -slug: Web/API/Element/dblclick_event -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}}
- -

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

- -

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

- - - - - - - - - - - - - - - - - - - - -
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
- -

例

- -

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

- -

JavaScript

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

HTML

- -
<aside>
-  <h3>My Card</h3>
-  <p>Double click to resize this object.</p>
-</aside>
- -

CSS

- -
aside {
-  background: #fe9;
-  border-radius: 1em;
-  display: inline-block;
-  padding: 1em;
-  transform: scale(.9);
-  transform-origin: 0 0;
-  transition: transform .6s;
-}
-
-.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')}}
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/dblclick_event/index.md b/files/ja/web/api/element/dblclick_event/index.md new file mode 100644 index 0000000000..4f6bd3ee7e --- /dev/null +++ b/files/ja/web/api/element/dblclick_event/index.md @@ -0,0 +1,122 @@ +--- +title: 'Element: dblclick イベント' +slug: Web/API/Element/dblclick_event +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}}
+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可能はい
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
+ +

例

+ +

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

+ +

JavaScript

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

HTML

+ +
<aside>
+  <h3>My Card</h3>
+  <p>Double click to resize this object.</p>
+</aside>
+ +

CSS

+ +
aside {
+  background: #fe9;
+  border-radius: 1em;
+  display: inline-block;
+  padding: 1em;
+  transform: scale(.9);
+  transform-origin: 0 0;
+  transition: transform .6s;
+}
+
+.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')}}
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf