.mouseleave()【《マウス退出 (バブリングなし)》イベントハンドラ設定・実行】
メモ
- 《マウス退出 (バブリングなし)》イベントハンドラの設定
.on( "mouseleave" [, data], handler )の省略形- 解除は、.off()【イベントハンドラ解除】
- .hover()【《ホバー》イベントハンドラ設定】で《マウス進入 (バブリングなし)》イベントハンドラも一度に設定可
- 対応する.mouseenter()【《マウス進入 (バブリングなし)》イベントハンドラ設定・実行】 と共にイベントのバブルアップなし
下記はバブルアップあり
.mouseover()【《マウス進入》イベントハンドラ設定・実行】
.mouseout()【《マウス退出》イベントハンドラ設定・実行】
- 《マウス退出 (バブリングなし)》イベントハンドラの実行
構文
| 説明 | 構文 | 戻り値 | ||||||
|---|---|---|---|---|---|---|---|---|
| 《マウス退出 (バブリングなし)》 イベントハンドラ設定 | .mouseleave( handler ) 1.0 handler：イベントハンドラ
.on( "mouseleave", handler )の省略形 | jQuery | ||||||
| .mouseleave( [eventData ], handler ) 1.4.3 Anything eventData：イベントデータ handler：イベントハンドラ
.on( "mouseleave", data, handler )の省略形 | jQuery | |||||||
| 《マウス退出 (バブリングなし)》 イベントハンドラ実行 | .mouseleave() 1.0.trigger( "mouseleave" )の省略形 | jQuery |
関連
例
<style>
.classMouse { background-color:cyan !important; }
#fieldset1 div, #fieldset2 div { width:200px; height:100px; background-color:lightyellow; border:2px black solid; }
.output { width:300px; height:100px; }
</style>
<fieldset id="fieldset1" class="ex1">
<legend>.mouseenter() / .mouseleave() 【イベントのバブルアップなし】</legend>
<div id="div1" class="ex1"></div>
</fieldset>
<p><textarea id="output1" class="output">【出力】</textarea></p>
<fieldset id="fieldset2" class="ex2">
<legend>.mouseover() / .mouseout() 【イベントのバブルアップあり】</legend>
<div id="div2" class="ex2"></div>
</fieldset>
<p><textarea id="output2" class="output">【出力】</textarea></p>
<script>
function output(outputId, msg) {
var $output = $(outputId);
$output.val($output.val() + "\n" + msg);
}
// .mouseenter() / .mouseleave()
$(".ex1").mouseenter("EX1", function(eventObject) {
$(this).addClass("classMouse");
var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
output("#output1", msg);
});
$(".ex1").mouseleave("EX1", function(eventObject) {
$(this).removeClass("classMouse");
var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
output("#output1", msg);
});
// .mouseover() / .mouseout()
$(".ex2").mouseover("EX2", function(eventObject) {
$(this).addClass("classMouse");
var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
output("#output2", msg);
});
$(".ex2").mouseout("EX2", function(eventObject) {
$(this).removeClass("classMouse");
var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
output("#output2", msg);
});
</script>