Element: mouseout イベント
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);
結果
仕様書
Specification |
---|
UI Events # event-type-mouseout |
HTML Standard # handler-onmouseout |
ブラウザーの互換性
BCD tables only load in the browser