.off()【イベントハンドラ解除】

メモ

  • .on()【イベントハンドラ設定】で設定されたイベントハンドラを解除
    • 下記の非推奨メソッドを統一
      .unbind()【イベントハンドラ解除】 1.0 / 1.4.33.0
      .undelegate()【イベントハンドラ解除 (セレクタ指定)】 1.4.2 / 1.4.3 / 1.63.0
      .die()【イベントハンドラ解除 (動的要素対応)】 1.3 / 1.4.1 / 1.4.31.71.9
    • .on( "イベント名", ...) の省略形 のイベントハンドラ解除でも使用
  • イベント名
    ( .on()【イベントハンドラ設定】のイベント名については、イベント名 参照 )
    • イベントタイプのみ (例："click")
    • イベントタイプ ＋ 名前空間 (例："click.name1")
    • 名前空間のみ (例：".name2")
    • 全て：パラメータ無し

構文

説明構文戻り値
イベントハンドラ解除 .off( events [, selector ] [, handler ] )  1.7

String events：イベント名 上記メモ (複数：スペース区切り)
[ String selector ]：.on() で指定したセレクタ文字列 ("**"：全て)
[ handler ]：イベントハンドラ (false：.on() で false 指定したものを解除)
引数説明
Event eventObjectイベントオブジェクト
jQuery
.off( events [, selector ] )  1.7

PlainObject events：【キー】・【値】のオブジェクト
  【キー】イベント名 上記メモ (複数：スペース区切り)
  【値】イベントハンドラ
[ String selector ]：.on() で指定したセレクタ文字列 ("**"：全て)
jQuery
.off( event )  1.7

Event event：イベントオブジェクト 		jQuery
.off()  1.7
(全イベントハンドラ解除) 		jQuery

関連

例

イベント名

<style>
.className { float:left; width:100px; height:100px; margin:5px; border:1px black solid; padding:5px; word-wrap:break-word; }
#outputName { width:400px; height:100px; font-size:large; background-color:lightcyan; }
</style>

<div style="height:120px;">
  <div id="idName1" class="className">[ idName1 ]</div>
  <div id="idName2" class="className">[ idName2 ]</div>
  <div id="idName3" class="className">[ idName3 ]</div>
  <div id="idName4" class="className">[ idName4 ]</div>
  <div id="idName5" class="className">[ idName5 ]</div>
</div>

<p><textarea id="outputName">【出力】</textarea></p>

<script>
function funcOnName($target, $output) {
  $target.append("<br>click<br>dblclick")
    .on( "click", function(event) { $output.val("[ " + this.id + " ]"); } )
    .on( "click.nameA", function() { $output.val($output.val() + "\nclick.nameA"); } )
    .on( "click.nameB", function() { $output.val($output.val() + "\nclick.nameB"); } )
    .on( "click.nameC", function() { $output.val($output.val() + "\nclick.nameC"); } )
    .on( "dblclick", function(event) { $output.val("[ " + this.id + " ]"); } )
    .on( "dblclick.nameA", function() { $output.val($output.val() + "\ndblclick.nameA"); } )
    .on( "dblclick.nameB", function() { $output.val($output.val() + "\ndblclick.nameB"); } )
    .on( "dblclick.nameC", function() { $output.val($output.val() + "\ndblclick.nameC"); } );
}

var $outputName = $("#outputName");
// 解除無し
var $idName1 = $("#idName1");
funcOnName($idName1, $outputName);
$idName1.append("<br><br>解除無し");

// イベントタイプのみ 解除
var $idName2 = $("#idName2");
funcOnName($idName2, $outputName);
$idName2.off("click").append('<br><br>.off("click")');
$idName2.on( "click", function() { $outputName.val($outputName.val() + "\n( click )"); } )

// イベントタイプ ＋ 名前空間 解除
var $idName3 = $("#idName3");
funcOnName($idName3, $outputName);
$idName3.off("click.nameB").append('<br><br>.off("click.nameB")');

// 名前空間のみ 解除
var $idName4 = $("#idName4");
funcOnName($idName4, $outputName);
$idName4.off(".nameA").append('<br><br>.off(".nameA")');

// 解除
var $idName5 = $("#idName5");
funcOnName($idName5, $outputName);
$idName5.off().append('<br><br>.off()');
$idName5.on( "click", function() { $outputName.val($outputName.val() + "\n( click )"); } )
$idName5.on( "dblclick", function() { $outputName.val($outputName.val() + "\n( dblclick )"); } )
</script>
[ idName1 ]
[ idName2 ]
[ idName3 ]
[ idName4 ]
[ idName5 ]

セレクタ指定・ハンドラ指定

<style>
.classSlctr { float:left; width:100px; height:100px; margin:5px; border:1px black solid; padding:5px; word-wrap:break-word; }
#outputSlctr { width:300px; height:100px; font-size:large; background-color:lightcyan; }
</style>

<div id="parentSlctr" style="height:120px;">
  <div id="idSlctr1" class="classSlctr classA classB">[ idSlctr1 ]<br>classA<br>classB<br></div>
  <div id="idSlctr2" class="classSlctr classB classC">[ idSlctr2 ]<br>classB<br>classC<br></div>
  <div id="idSlctr3" class="classSlctr classC classD">[ idSlctr3 ]<br>classC<br>classD<br></div>
  <div id="idSlctr4" class="classSlctr classD classE">[ idSlctr4 ]<br>classD<br>classE<br></div>
  <div id="idSlctr5" class="classSlctr classE classF">[ idSlctr5 ]<br>classE<br>classF<br></div>
</div>

<p id="opeSlctr" style="border:1px black solid; padding:1px 5px;">【操作】</p>
<p><textarea id="outputSlctr">【出力】</textarea></p>

<script>
function funcInitSlctr($parent, $output) {
  $parent
    .on( "click", ".classA", function() { $output.val($output.val() + "\nclick .classA"); } )
    .on( "click", ".classB", function() { $output.val($output.val() + "\nclick .classB"); } )
    .on( "click", ".classC", function() { $output.val($output.val() + "\nclick .classC"); } )
    .on( "click", ".classD", function() { $output.val($output.val() + "\nclick .classD"); } )
    .on( "click", ".classE", funcClickE )
    .on( "click", ".classF", function() { $output.val($output.val() + "\nclick .classF"); } )
    .on( "dblclick", ".classA", function() { $output.val($output.val() + "\ndblclick .classA"); } )
    .on( "dblclick", ".classB", function() { $output.val($output.val() + "\ndblclick .classB"); } )
    .on( "dblclick", ".classC", function() { $output.val($output.val() + "\ndblclick .classC"); } )
    .on( "dblclick", ".classD", function() { $output.val($output.val() + "\ndblclick .classD"); } )
    .on( "dblclick", ".classE", function() { $output.val($output.val() + "\ndblclick .classE"); } )
    .on( "dblclick", ".classF", function() { $output.val($output.val() + "\ndblclick .classF"); } );
}

function funcClickE() { $("#outputSlctr").val($("#outputSlctr").val() + "\nclick .classE"); }

function funcOnSlctr($target, $output) {
  $target.append("<br>click<br>dblclick")
    .on( "click", function(event) { $output.val("[ " + this.id + " ]"); } )
    .on( "dblclick", function(event) { $output.val("[ " + this.id + " ]"); } );
}

var $parentSlctr = $("#parentSlctr");
var $outputSlctr = $("#outputSlctr");
var $opeSlctr = $("#opeSlctr");
funcInitSlctr($parentSlctr, $outputSlctr);

var $idSlctr1 = $("#idSlctr1");
funcOnSlctr($idSlctr1, $outputSlctr);
var $idSlctr2 = $("#idSlctr2");
funcOnSlctr($idSlctr2, $outputSlctr);
var $idSlctr3 = $("#idSlctr3");
funcOnSlctr($idSlctr3, $outputSlctr);
var $idSlctr4 = $("#idSlctr4");
funcOnSlctr($idSlctr4, $outputSlctr);
var $idSlctr5 = $("#idSlctr5");
funcOnSlctr($idSlctr5, $outputSlctr);

// セレクタ指定 (click)
$opeSlctr.append('<br>.off("click", ".classC")');
$parentSlctr.off("click", ".classC");
// セレクタ指定 (click dblclick)
$opeSlctr.append('<br>.off("click dblclick", ".classD")');
$parentSlctr.off("click dblclick", ".classD");
// ハンドラ指定
$opeSlctr.append('<br>.off("click", "funcClickE")');
$opeSlctr.append('<br>.off("dblclick", "funcClickE") 解除なし');
$parentSlctr.off("click", funcClickE);
$parentSlctr.off("dblclick", funcClickE); // 解除なし
</script>
[ idSlctr1 ]
classA
classB
[ idSlctr2 ]
classB
classC
[ idSlctr3 ]
classC
classD
[ idSlctr4 ]
classD
classE
[ idSlctr5 ]
classE
classF

【操作】

イベントオブジェクト

<style>
.classObject { float:left; width:100px; height:100px; margin:5px; border:1px black solid; padding:5px; word-wrap:break-word; }
#outputObject { width:200px; height:100px; font-size:large; background-color:lightcyan; }
</style>

<div style="height:120px;">
  <div id="idObject1" class="classObject">[ idObject1 ]<br>click<br>dblclick</div>
</div>

<p><textarea id="outputObject">【出力】</textarea></p>

<script>
var $idObject1 = $("#idObject1");
$idObject1.on("click", function(event) {
  $("#outputObject").html("[ " + this.id + " ]\nclick 初回のみ");
  $(this).off(event);
});

$idObject1.on("click", function(event) {
  $("#outputObject").val($("#outputObject").val() + "\n(click)");
});

$idObject1.on("dblclick", function() {
  $("#outputObject").val("[ " + this.id + " ]\ndblclick");
});
</script>
[ idObject1 ]
click
dblclick