mouseout
イベントは Element
において、ポインティングデバイス (普通はマウス) を使用してカーソルが要素またはその子要素のうちの一つに含まれなくなったときに発生します。 mouseout
は、カーソルが子要素に入った場合にも要素に配信されますが、これは子要素が要素の可視領域を覆い隠すためです。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | MouseEvent |
イベントハンドラープロパティ | onmouseout |
例
以下の例は mouseout
イベントの使い方を示しています。
mouseout と mouseleave
以下の例は、 mouseout
と mouseleave
の各イベントの違いを説明しています。 mouseleave
イベントを <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);
結果
仕様書
仕様書 | 状態 |
---|---|
UI Events mouseout の定義 |
草案 |
Document Object Model (DOM) Level 3 Events Specification mouseout の定義 |
廃止 |
ブラウザーの互換性
BCD tables only load in the browser