jQueryでイベントを禁止する方法-フロントエンドQ&A-php.cn

jQueryでイベントを禁止する方法

WBOY

リリース： 2022-05-23 10:17:05

オリジナル

2870 人が閲覧しました

イベントを禁止する Jquery メソッド: 1. unbind() メソッドを使用します。構文は「element object.unbind (禁止されたイベント)」です。 2. off() メソッドを使用します。構文は「element」です。 object.off(forbidden events or namespace)" の場合、このメソッドは通常、on() メソッドを通じて追加されたイベントハンドラーを削除するために使用されます。

jQueryでイベントを禁止する方法

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery でイベントを禁止する方法

1. unbind() メソッド

unbind() メソッドは、選択した要素のイベントハンドラーを削除します。。

このメソッドは、イベントの発生時にすべてまたは選択したイベントハンドラーを削除したり、指定された関数の実行を終了したりできます。

このメソッドは、イベントオブジェクトを通じてイベントハンドラーのバインドを解除することもできます。このメソッドは、イベント自体のバインドを解除するためにも使用されます (イベントが一定回数トリガーされた後のイベントハンドラーの削除など)。

注: パラメーターが指定されていない場合、unbind() メソッドは指定された要素のすべてのイベントハンドラーを削除します。

注: unbind() メソッドは、jQuery によって追加されたすべてのイベントハンドラーに適用されます。

構文

$(selector).unbind(event,function,eventObj)

ログイン後にコピー

event オプション。要素から削除する 1 つ以上のイベントを指定します。スペースで区切られた複数のイベント値。このパラメーターのみを指定した場合、指定したイベントにバインドされているすべての関数が削除されます。
関数オプション。指定されたイベントを要素からバインド解除する関数の名前を指定します。
eventObj オプション。使用する削除されたイベントオブジェクトを指定します。 eventsObj パラメータは、イベントバインディング関数から取得されます。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>点击任意段落(p 元素)，该段落就会消失。</p>
<button>移除所有段落(p 元素)的事件句柄</button>
</body>
</html>

ログイン後にコピー

出力結果:

jQueryでイベントを禁止する方法

2.off( ) method

off() メソッドは、通常、on() メソッドを通じて追加されたイベントハンドラーを削除するために使用されます。

構文

$(selector).off(event,selector,function(eventObj),map)

ログイン後にコピー

event 必須。選択した要素から削除する 1 つ以上のイベントまたは名前空間を指定します。スペースで区切られた複数のイベント値。有効なイベントである必要があります。

セレクターオプション。イベントハンドラーを追加するときに、最初に on() メソッドに渡されるセレクターを指定します。

function(eventObj) オプション。イベントの発生時に実行する関数を指定します。

map は、要素に追加する 1 つ以上のイベントと、イベントの発生時に実行する関数を含むイベントマップ ({event:function, events:function, ...}) を指定します。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    $(this).css("background-color","pink");
  });
  $("button").click(function(){
    $("p").off("click");
  });
});
</script>
</head>
<body>
<p>点击这个段落修改它的背景颜色。</p>
<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
<button>移除 click 事件句柄</button>
</body>
</html>

ログイン後にコピー

出力結果:

jQueryでイベントを禁止する方法