jQueryでライブイベントをキャンセルする方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jQueryでライブイベントをキャンセルする方法

May 16, 2022 pm 06:59 PM

jquery

jquery では、die() メソッドを使用してライブイベントをキャンセルできます。このメソッドは、live() メソッドによってバインドされた指定されたイベントを削除できます。構文は "$(selector).die(" です)イベント名"," 処理関数名 ")"; die() メソッドの両方のパラメータは省略でき、バインドされたすべてのライブイベントが削除されます。

jQueryでライブイベントをキャンセルする方法

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

die() メソッドを使用してライブイベントをキャンセルします。

die() メソッドは、live() メソッドを通じて選択された要素に追加された 1 つ以上のイベントハンドラーを削除します。

簡単に言えば、die() メソッドは、live() メソッドによってバインドされた指定されたイベントを削除できます。

構文:

1	`$(selector).die(event,function)`

ログイン後にコピー

オプション。削除する特定の機能を指定します。

パラメータ	説明
イベント	オプション。削除する 1 つ以上のイベントハンドラーを指定します。スペースで区切られた複数のイベント値。有効なイベントである必要があります。
#関数

注: die() メソッドは jQuery バージョン 1.7 で非推奨となり、バージョン 1.9 で削除されました。

例 1: live() メソッドを介して

要素に追加されたすべてのイベントハンドラーを削除します

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("p").live("click", function() {
                    $(this).slideToggle();
                });
                $("button").click(function() {
                    $("p").die();
                });
            });
        </script>
    </head>
    <body>
 
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <p>点击任意一个段落，使其消失。</p>
        <button>移除click事件</button><br><br>
        <div>p 元素的click事件通过 live() 方法来添加</div>
    </body>
</html>

ログイン後にコピー

jQueryでライブイベントをキャンセルする方法

例 2: die( ) を使用します。このメソッドは、選択した要素から指定されたイベントハンドラーを 1 つだけ削除します

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.min.js"></script>
        <script>
            function changeSize() {
                $(this).animate({
                    fontSize: "+=3px"
                });
            }
 
            function changeSpacing() {
                $(this).animate({
                    letterSpacing: "+=2px"
                });
            }
            $(document).ready(function() {
                $("p").live("click", changeSize);
                $("p").live("click", changeSpacing);
                $("button").click(function() {
                    $("p").die("click", changeSize);
                });
            });
        </script>
    </head>
    <body>
 
        <p>这是一个段落。</p>
        <p>这是另外一个段落。</p>
        <p>点击任意一个段落，放大字体。</p>
        <button>移除事件句柄 changeSize()，p 元素的click事件通过 live() 方法来添加。</button><br><br>
 
    </body>
</html>