ホームページ > 記事 > ウェブフロントエンド > JavaScriptで要素のクリックイベントを削除する方法
JavaScriptで要素のクリックイベントを削除する方法
- WBOYオリジナル
- 2022-04-11 16:51:235522ブラウズ
方法: 1. 選択した要素のイベント ハンドラーを削除できる「click element object.unbind("click");」メソッドを使用します。 2. 「click element object.off(」 click ");" メソッド。on() メソッドを通じて追加されたイベント ハンドラーを削除できます。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript で要素のクリック イベントを削除する方法
方法 1. unbind() メソッドを使用します
unbind() メソッドを使用して、次のイベントを削除します。選択された要素ハンドラー。
このメソッドは、イベントの発生時にすべてまたは選択したイベント ハンドラーを削除したり、指定された関数の実行を終了したりできます。
このメソッドは、イベント オブジェクトを通じてイベント ハンドラーのバインドを解除することもできます。このメソッドは、イベント自体のバインドを解除するためにも使用されます (イベントが一定回数トリガーされた後のイベント ハンドラーの削除など)。
注: パラメーターが指定されていない場合、unbind() メソッドは指定された要素のすべてのイベント ハンドラーを削除します。
注: unbind() メソッドは、jQuery によって追加されたすべてのイベント ハンドラーに適用されます。
例は次のとおりです:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dianji").click(function(){
$("p").slideToggle();
});
$(".yichu").click(function(){
$(".dianji").unbind("click");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="dianji">点击事件</button>
<button class="yichu">移除点击事件</button>
</body>
</html>出力結果:
##方法 2、off() メソッドを使用します
off() メソッドは、通常、on() メソッドを通じて追加されたイベント ハンドラーを削除するために使用されます。 jQuery バージョン 1.7 以降、off() メソッドは、unbind()、die()、および undelegate() メソッドの新しい代替品です。このメソッドは API に多くの利便性をもたらし、jQuery コード ベースを簡素化するため推奨されます。 注: 指定したイベント ハンドラーを削除するには、セレクター文字列が、イベント ハンドラーの追加時に on() メソッドで渡されるパラメーターと一致する必要があります。 例は次のとおりです:<!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>出力結果: 
##[関連する推奨事項:
以上がJavaScriptで要素のクリックイベントを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。