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 --- files/ja/web/api/element/mouseleave_event/index.md | 156 +++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 files/ja/web/api/element/mouseleave_event/index.md (limited to 'files/ja/web/api/element/mouseleave_event/index.md') 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")}}

+ +

関連情報

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