From 9c55ffbfe925ba0fab13d1597bdc4b1fefae64cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Oct 2021 02:04:38 +0900 Subject: Element オブジェクトのマウスイベントを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/mousedown_event/index.html | 93 ------------ files/ja/web/api/element/mousedown_event/index.md | 93 ++++++++++++ .../ja/web/api/element/mouseenter_event/index.html | 162 --------------------- files/ja/web/api/element/mouseenter_event/index.md | 162 +++++++++++++++++++++ .../ja/web/api/element/mouseleave_event/index.html | 156 -------------------- files/ja/web/api/element/mouseleave_event/index.md | 156 ++++++++++++++++++++ .../ja/web/api/element/mousemove_event/index.html | 159 -------------------- files/ja/web/api/element/mousemove_event/index.md | 159 ++++++++++++++++++++ files/ja/web/api/element/mouseout_event/index.html | 132 ----------------- files/ja/web/api/element/mouseout_event/index.md | 132 +++++++++++++++++ .../ja/web/api/element/mouseover_event/index.html | 128 ---------------- files/ja/web/api/element/mouseover_event/index.md | 128 ++++++++++++++++ files/ja/web/api/element/mouseup_event/index.html | 90 ------------ files/ja/web/api/element/mouseup_event/index.md | 90 ++++++++++++ 14 files changed, 920 insertions(+), 920 deletions(-) delete mode 100644 files/ja/web/api/element/mousedown_event/index.html create mode 100644 files/ja/web/api/element/mousedown_event/index.md delete mode 100644 files/ja/web/api/element/mouseenter_event/index.html create mode 100644 files/ja/web/api/element/mouseenter_event/index.md delete mode 100644 files/ja/web/api/element/mouseleave_event/index.html create mode 100644 files/ja/web/api/element/mouseleave_event/index.md delete mode 100644 files/ja/web/api/element/mousemove_event/index.html create mode 100644 files/ja/web/api/element/mousemove_event/index.md delete mode 100644 files/ja/web/api/element/mouseout_event/index.html create mode 100644 files/ja/web/api/element/mouseout_event/index.md delete mode 100644 files/ja/web/api/element/mouseover_event/index.html create mode 100644 files/ja/web/api/element/mouseover_event/index.md delete mode 100644 files/ja/web/api/element/mouseup_event/index.html create mode 100644 files/ja/web/api/element/mouseup_event/index.md (limited to 'files') diff --git a/files/ja/web/api/element/mousedown_event/index.html b/files/ja/web/api/element/mousedown_event/index.html deleted file mode 100644 index 5c597f9155..0000000000 --- a/files/ja/web/api/element/mousedown_event/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 'Element: mousedown イベント' -slug: Web/API/Element/mousedown_event -tags: - - API - - DOM - - Down - - Element - - Event - - Interface - - MouseEvent - - Press - - Reference - - UI - - button - - events - - mouse - - mousedown - - イベント -translation_of: Web/API/Element/mousedown_event ---- -

{{APIRef}}

- -

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

- -
-

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

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

例

- -

{{page("/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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mousedown_event/index.md b/files/ja/web/api/element/mousedown_event/index.md new file mode 100644 index 0000000000..5c597f9155 --- /dev/null +++ b/files/ja/web/api/element/mousedown_event/index.md @@ -0,0 +1,93 @@ +--- +title: 'Element: mousedown イベント' +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Down + - Element + - Event + - Interface + - MouseEvent + - Press + - Reference + - UI + - button + - events + - mouse + - mousedown + - イベント +translation_of: Web/API/Element/mousedown_event +--- +

{{APIRef}}

+ +

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

+ +
+

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

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

例

+ +

{{page("/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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mouseenter_event/index.html b/files/ja/web/api/element/mouseenter_event/index.html deleted file mode 100644 index f78dfa48da..0000000000 --- a/files/ja/web/api/element/mouseenter_event/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: 'Element: mouseenter イベント' -slug: Web/API/Element/mouseenter_event -tags: - - API - - Cursor - - DOM - - Element - - Event - - Interface - - MouseEvent - - Reference - - events - - mouse - - mouseenter - - pointer - - イベント -translation_of: Web/API/Element/mouseenter_event ---- -
{{APIRef}}
- -

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

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

使用上の注意

- -

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

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

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

- -

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

- -

例

- -

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

- -

mouseenter

- -

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

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
- -

CSS

- -

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

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem('This is mouseenter event ' + enterEventCount + '.');
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem('This is mouseleave event ' + leaveEventCount + '.');
-});
-
-function addListItem(text) {
-  // 指定されたテキストを使用して新しいテキストノードを生成する
-  var newTextNode = document.createTextNode(text);
-
-  // 新しい li 要素を生成する
-  var newListItem = document.createElement("li");
-
-  // テキストノードを li 要素に追加する
-  newListItem.appendChild(newTextNode);
-
-  // リストに新しく生成したリスト項目を追加する
-  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')}}
- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseenter_event/index.md b/files/ja/web/api/element/mouseenter_event/index.md new file mode 100644 index 0000000000..f78dfa48da --- /dev/null +++ b/files/ja/web/api/element/mouseenter_event/index.md @@ -0,0 +1,162 @@ +--- +title: 'Element: mouseenter イベント' +slug: Web/API/Element/mouseenter_event +tags: + - API + - Cursor + - DOM + - Element + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseenter + - pointer + - イベント +translation_of: Web/API/Element/mouseenter_event +--- +
{{APIRef}}
+ +

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

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

使用上の注意

+ +

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

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

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

+ +

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

+ +

例

+ +

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

+ +

mouseenter

+ +

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

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

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

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // 指定されたテキストを使用して新しいテキストノードを生成する
+  var newTextNode = document.createTextNode(text);
+
+  // 新しい li 要素を生成する
+  var newListItem = document.createElement("li");
+
+  // テキストノードを li 要素に追加する
+  newListItem.appendChild(newTextNode);
+
+  // リストに新しく生成したリスト項目を追加する
+  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')}}
+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mouseleave_event/index.html b/files/ja/web/api/element/mouseleave_event/index.html deleted file mode 100644 index e98bf28c3b..0000000000 --- a/files/ja/web/api/element/mouseleave_event/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: 'Element: mouseleave イベント' -slug: Web/API/Element/mouseleave_event -tags: - - API - - DOM - - Element - - Event - - MouseEvent - - Reference - - events - - mouse - - mouseleave - - move -translation_of: Web/API/Element/mouseleave_event ---- -

{{APIRef}}

- -

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

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

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

- -
-
mouseenter.png
- -

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

- -
mouseover.png
- -

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

-
- -

例

- -

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

- -

mouseleave

- -

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

- -

HTML

- -
<div id='mouseTarget'>
- <ul id="unorderedList">
-  <li>No events yet!</li>
- </ul>
-</div>
- -

CSS

- -

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

- -
#mouseTarget {
-  box-sizing: border-box;
-  width:15rem;
-  border:1px solid #333;
-}
- -

JavaScript

- -
var enterEventCount = 0;
-var leaveEventCount = 0;
-const mouseTarget = document.getElementById('mouseTarget');
-const unorderedList = document.getElementById('unorderedList');
-
-mouseTarget.addEventListener('mouseenter', e => {
-  mouseTarget.style.border = '5px dotted orange';
-  enterEventCount++;
-  addListItem('This is mouseenter event ' + enterEventCount + '.');
-});
-
-mouseTarget.addEventListener('mouseleave', e => {
-  mouseTarget.style.border = '1px solid #333';
-  leaveEventCount++;
-  addListItem('This is mouseleave event ' + leaveEventCount + '.');
-});
-
-function addListItem(text) {
-  // 与えられたテキストで新しいテキストノードを生成する
-  var newTextNode = document.createTextNode(text);
-
-  // 新しい li 要素を生成
-  var newListItem = document.createElement("li");
-
-  // テキストノードを li 要素に追加
-  newListItem.appendChild(newTextNode);
-
-  // 新しく生成されたリスト項目をリストへ追加
-  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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseleave_event/index.md b/files/ja/web/api/element/mouseleave_event/index.md new file mode 100644 index 0000000000..e98bf28c3b --- /dev/null +++ b/files/ja/web/api/element/mouseleave_event/index.md @@ -0,0 +1,156 @@ +--- +title: 'Element: mouseleave イベント' +slug: Web/API/Element/mouseleave_event +tags: + - API + - DOM + - Element + - Event + - MouseEvent + - Reference + - events + - mouse + - mouseleave + - move +translation_of: Web/API/Element/mouseleave_event +--- +

{{APIRef}}

+ +

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

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

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

+ +
+
mouseenter.png
+ +

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

+ +
mouseover.png
+ +

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

+
+ +

例

+ +

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

+ +

mouseleave

+ +

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

+ +

HTML

+ +
<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+ +

CSS

+ +

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

+ +
#mouseTarget {
+  box-sizing: border-box;
+  width:15rem;
+  border:1px solid #333;
+}
+ +

JavaScript

+ +
var enterEventCount = 0;
+var leaveEventCount = 0;
+const mouseTarget = document.getElementById('mouseTarget');
+const unorderedList = document.getElementById('unorderedList');
+
+mouseTarget.addEventListener('mouseenter', e => {
+  mouseTarget.style.border = '5px dotted orange';
+  enterEventCount++;
+  addListItem('This is mouseenter event ' + enterEventCount + '.');
+});
+
+mouseTarget.addEventListener('mouseleave', e => {
+  mouseTarget.style.border = '1px solid #333';
+  leaveEventCount++;
+  addListItem('This is mouseleave event ' + leaveEventCount + '.');
+});
+
+function addListItem(text) {
+  // 与えられたテキストで新しいテキストノードを生成する
+  var newTextNode = document.createTextNode(text);
+
+  // 新しい li 要素を生成
+  var newListItem = document.createElement("li");
+
+  // テキストノードを li 要素に追加
+  newListItem.appendChild(newTextNode);
+
+  // 新しく生成されたリスト項目をリストへ追加
+  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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mousemove_event/index.html b/files/ja/web/api/element/mousemove_event/index.html deleted file mode 100644 index aa0d3ccddc..0000000000 --- a/files/ja/web/api/element/mousemove_event/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: 'Element: mousemove イベント' -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}}

- -

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

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

例

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

HTML

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

CSS

- -
canvas {
-  border: 1px solid black;
-  width: 560px;
-  height: 360px;
-}
- -

JavaScript

- -
// isDrawing が真のとき、マウスを動かすと線を描く
-let isDrawing = false;
-let x = 0;
-let y = 0;
-
-const myPics = document.getElementById('myPics');
-const context = myPics.getContext('2d');
-
-// event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。
-
-// mousedown, mousemove, mouseup にイベントリスナーを追加
-myPics.addEventListener('mousedown', e => {
-  x = e.offsetX;
-  y = e.offsetY;
-  isDrawing = true;
-});
-
-myPics.addEventListener('mousemove', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.offsetX, e.offsetY);
-    x = e.offsetX;
-    y = e.offsetY;
-  }
-});
-
-window.addEventListener('mouseup', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.offsetX, e.offsetY);
-    x = 0;
-    y = 0;
-    isDrawing = false;
-  }
-});
-
-function drawLine(context, x1, y1, x2, y2) {
-  context.beginPath();
-  context.strokeStyle = 'black';
-  context.lineWidth = 1;
-  context.moveTo(x1, y1);
-  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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mousemove_event/index.md b/files/ja/web/api/element/mousemove_event/index.md new file mode 100644 index 0000000000..aa0d3ccddc --- /dev/null +++ b/files/ja/web/api/element/mousemove_event/index.md @@ -0,0 +1,159 @@ +--- +title: 'Element: mousemove イベント' +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}}

+ +

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

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

例

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

HTML

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

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

+ +
// isDrawing が真のとき、マウスを動かすと線を描く
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// event.offsetX, event.offsetY はキャンバスの縁からのオフセットの (x,y) です。
+
+// mousedown, mousemove, mouseup にイベントリスナーを追加
+myPics.addEventListener('mousedown', e => {
+  x = e.offsetX;
+  y = e.offsetY;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.offsetX, e.offsetY);
+    x = e.offsetX;
+    y = e.offsetY;
+  }
+});
+
+window.addEventListener('mouseup', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.offsetX, e.offsetY);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mouseout_event/index.html b/files/ja/web/api/element/mouseout_event/index.html deleted file mode 100644 index a27a6f4f57..0000000000 --- a/files/ja/web/api/element/mouseout_event/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: 'Element: mouseout イベント' -slug: Web/API/Element/mouseout_event -tags: - - API - - DOM - - Event - - Interface - - MouseEvent - - Reference - - events - - mouse - - mouseout - - move - - イベント - - マウス -translation_of: Web/API/Element/mouseout_event ---- -
{{APIRef}}
- -

mouseout イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

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

例

- -

以下の例は mouseout イベントの使い方を示しています。

- -

mouseout と mouseleave

- -

以下の例は、 mouseout と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 mouseleave イベントを {{HTMLElement("ul")}} に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。 mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

- -

これを試してみると、 mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

- -

HTML

- -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// マウスが <ul> を出るとリストを一時的に紫色にします
-// ときに1度だけ実行されます
-test.addEventListener("mouseleave", function( event ) {
-  // mouseleave の対象を強調
-  event.target.style.color = "purple";
-
-  // 少し待ってから色をリセット
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 1000);
-}, false);
-
-// マウスが出ると <li> を一時的にオレンジ色にします
-test.addEventListener("mouseout", function( event ) {
-  // mouseout の対象を強調
-  event.target.style.color = "orange";
-
-  // 少し待ってから色をリセット
-  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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseout_event/index.md b/files/ja/web/api/element/mouseout_event/index.md new file mode 100644 index 0000000000..a27a6f4f57 --- /dev/null +++ b/files/ja/web/api/element/mouseout_event/index.md @@ -0,0 +1,132 @@ +--- +title: 'Element: mouseout イベント' +slug: Web/API/Element/mouseout_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseout + - move + - イベント + - マウス +translation_of: Web/API/Element/mouseout_event +--- +
{{APIRef}}
+ +

mouseout イベントは {{domxref("Element")}} において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 mouseout は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。

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

例

+ +

以下の例は mouseout イベントの使い方を示しています。

+ +

mouseout と mouseleave

+ +

以下の例は、 mouseout と {{domxref("Element/mouseleave_event", "mouseleave")}} の各イベントの違いを説明しています。 mouseleave イベントを {{HTMLElement("ul")}} に追加し、マウスが <ul> を出るたびにリストを紫色に着色するようにします。 mouseout をリストに追加し、マウスがそこを出ると対象の要素をオレンジ色に着色するようにします。

+ +

これを試してみると、 mouseout はそれぞれのリスト項目に配信されるのに対し、 mouseleave は項目の階層構造のおかげでリスト全体に行き、リストの項目は、その下にある <ul> を不明瞭にします。

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// マウスが <ul> を出るとリストを一時的に紫色にします
+// ときに1度だけ実行されます
+test.addEventListener("mouseleave", function( event ) {
+  // mouseleave の対象を強調
+  event.target.style.color = "purple";
+
+  // 少し待ってから色をリセット
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 1000);
+}, false);
+
+// マウスが出ると <li> を一時的にオレンジ色にします
+test.addEventListener("mouseout", function( event ) {
+  // mouseout の対象を強調
+  event.target.style.color = "orange";
+
+  // 少し待ってから色をリセット
+  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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mouseover_event/index.html b/files/ja/web/api/element/mouseover_event/index.html deleted file mode 100644 index d6354496f4..0000000000 --- a/files/ja/web/api/element/mouseover_event/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 'Element: mouseover イベント' -slug: Web/API/Element/mouseover_event -tags: - - API - - Cursor - - DOM - - Event - - Interface - - MouseEvent - - Reference - - events - - mouse - - mouseover - - move - - pointer -translation_of: Web/API/Element/mouseover_event ---- -
{{APIRef}}
- -

mouseover イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。

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

例

- -

以下の例は、 mouseover と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。

- -

HTML

- -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
- -

JavaScript

- -
let test = document.getElementById("test");
-
-// このハンドラーは、カーソルが順序なしリストの上を移動した
-// ときに1度だけ実行されます
-test.addEventListener("mouseenter", function( event ) {
-  // mouseenter の対象を強調
-  event.target.style.color = "purple";
-
-  // 少し待ってから色をリセット
-  setTimeout(function() {
-    event.target.style.color = "";
-  }, 500);
-}, false);
-
-// このハンドラーは異なるリスト項目の上を移動するごとに
-// 実行されます
-test.addEventListener("mouseover", function( event ) {
-  // mouseover の対象を強調
-  event.target.style.color = "orange";
-
-  // 少し待ってから色をリセット
-  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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseover_event/index.md b/files/ja/web/api/element/mouseover_event/index.md new file mode 100644 index 0000000000..d6354496f4 --- /dev/null +++ b/files/ja/web/api/element/mouseover_event/index.md @@ -0,0 +1,128 @@ +--- +title: 'Element: mouseover イベント' +slug: Web/API/Element/mouseover_event +tags: + - API + - Cursor + - DOM + - Event + - Interface + - MouseEvent + - Reference + - events + - mouse + - mouseover + - move + - pointer +translation_of: Web/API/Element/mouseover_event +--- +
{{APIRef}}
+ +

mouseover イベントは {{domxref("Element")}} において、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに発生します。

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

例

+ +

以下の例は、 mouseover と {{domxref("Element/mouseenter_event", "mouseenter")}} の各イベントの違いを説明しています。

+ +

HTML

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+ +

JavaScript

+ +
let test = document.getElementById("test");
+
+// このハンドラーは、カーソルが順序なしリストの上を移動した
+// ときに1度だけ実行されます
+test.addEventListener("mouseenter", function( event ) {
+  // mouseenter の対象を強調
+  event.target.style.color = "purple";
+
+  // 少し待ってから色をリセット
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+// このハンドラーは異なるリスト項目の上を移動するごとに
+// 実行されます
+test.addEventListener("mouseover", function( event ) {
+  // mouseover の対象を強調
+  event.target.style.color = "orange";
+
+  // 少し待ってから色をリセット
+  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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/mouseup_event/index.html b/files/ja/web/api/element/mouseup_event/index.html deleted file mode 100644 index 982fd32c95..0000000000 --- a/files/ja/web/api/element/mouseup_event/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'Element: mouseup イベント' -slug: Web/API/Element/mouseup_event -tags: - - API - - DOM - - Event - - Interface - - MouseEvent - - Reference - - Release - - UI - - Up - - button - - events - - mouse - - mouseup - - イベント - - マウス -translation_of: Web/API/Element/mouseup_event ---- -
{{APIRef}}
- -

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

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

例

- -

{{page("/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')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseup_event/index.md b/files/ja/web/api/element/mouseup_event/index.md new file mode 100644 index 0000000000..982fd32c95 --- /dev/null +++ b/files/ja/web/api/element/mouseup_event/index.md @@ -0,0 +1,90 @@ +--- +title: 'Element: mouseup イベント' +slug: Web/API/Element/mouseup_event +tags: + - API + - DOM + - Event + - Interface + - MouseEvent + - Reference + - Release + - UI + - Up + - button + - events + - mouse + - mouseup + - イベント + - マウス +translation_of: Web/API/Element/mouseup_event +--- +
{{APIRef}}
+ +

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

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

例

+ +

{{page("/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')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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