ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptで要素のクリックイベントを削除する方法

JavaScriptで要素のクリックイベントを削除する方法

WBOY
WBOYオリジナル
2022-04-11 16:51:235539ブラウズ

方法: 1. 選択した要素のイベント ハンドラーを削除できる「click element object.unbind("click");」メソッドを使用します。 2. 「click element object.off(」 click ");" メソッド。on() メソッドを通じて追加されたイベント ハンドラーを削除できます。

JavaScriptで要素のクリックイベントを削除する方法

このチュートリアルの動作環境: 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>

出力結果:

JavaScriptで要素のクリックイベントを削除する方法

##方法 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で要素のクリックイベントを削除する方法##[関連する推奨事項:

javascript ビデオ チュートリアル

ウェブフロントエンド]

以上がJavaScriptで要素のクリックイベントを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。