onmouseleave - マウスポインタが離れた時に発火する

投稿日:2015/12/02

JavaScriptのイベントハンドラ、onmouseleaveの説明です。

説明

イベントハンドラのonmouseleaveは、マウスポインタが対象要素から離れた時に発火します。

「離れた時」とは具体的に、図のように対象要素(茶色)の領域内から領域外に出た時を指します。これは、onmouseoutと同じ条件です。

onmouseleaveとonmouseoutの違い

茶色の要素にイベントを設定してあります。マウスポインタと対象要素(茶色)の間に、別の要素(青色)がある位置に移動します。この時、マウスポインタは別の要素(青色)の上にありますが、まだ対象要素(茶色)の領域内に残っているので、onmouseleaveは発火しません。一方、onmouseoutは発火します。

サンプルコード

<div id="target"></div>

// 要素を取得
var divElement = document.getElementById( "target" ) ;

// 処理を定義
var action = function() {
	// 処理内容
}

// イベントを設定 ( addEventListener )
divElement.addEventListener( "mouseleave", action ) ;

// イベントを削除
divElement.removeEventListener( "mouseleave", action ) ;

// 要素を取得
var divElement = document.getElementById( "target" ) ;

// イベントを設定 ( onmouseleave )
divElement.onmouseleave = function() {
	// 処理内容
}

// イベントを削除
divElement.onmouseleave = null ;

デモ

onmouseleaveイベントを設定しました。マウスポインタを要素上で動かしてみて下さい。イベントが発火するごとに、発生回数がカウントアップされます。

RUN
HTML
CSS
JavaScript

<p>茶色の要素にイベントを設定してあります。</p> <div id="target" class="target"> <div class="child"></div> </div> <p class="output">発生回数: <span id="output">0</span></p> <p id="error" class="error none"></p> <p><button id="reset" class="button">リセット</button></p>

.child { background: #2660A1 ; padding: 30px ; } .target { border: 1px solid #e6e6e6 ; color: #fff ; padding: 40px ; margin: 0 auto ; text-align: center ; background: #d36015 ; display: block ; } .output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// イベント内容 var action = function(e) { try { // 発生回数を+1 var newCount = Number( document.getElementById( "output" ).textContent ) + 1 ; // 取得した結果を出力 document.getElementById( "output" ).textContent = newCount ; // コンソールで内容を出力 console.log( e ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } // イベントを設定 document.getElementById( "target" ).addEventListener( "mouseleave", action ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "0" ; }

外部リンク

HTML Living Standard - WHATWGによる仕様書。

説明

onmouseleaveとonmouseoutの違い

サンプルコード

デモ

関連項目

外部リンク