jQueryの.off(‘click’)イベントの使い方

jQueryの.off('click')イベントの使い方

57 回閲覧されました

みなさんこんにちは、jonioです。

クリックした時にイベントが発火する「.on(‘click’)」イベントがありますがクリックイベントを無効にする「.off(‘click’)」イベントもあります。

今回は「.off(‘click’)」イベントについてのメモの記事になります。

コードの書き方

向こうにしたいclickイベントと必ず一緒に使います。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; align-items:center;">
    <input type="button" id="btn1" value="現在日時">
    <div id="date"></div>
    </div>
    <input type="button" id="btn2" value=" off ">  
</div>

<script type="text/javascript">
    $(function() {
        $("#btn1").on("click", function() {
            $("#date").html(new Date());
        });
    });
    $(function() {
        $("#btn2").on("click", function() {
            $("#date").html("");
            $("#btn1").off('click');
        });
    });
</script>

「.off(‘click’)」を20行目で使っていますがこれで要素「#btn1」に対するクリックイベントを無効にできます。

.off(‘click’)ではなく.off()にした場合

この書き方をすると要素に紐づく全てのイベントを無効にします。

下記のコードで考えます。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div style="background-color : #CCC; padding : 20px 20px 10px;">
    <div style="display:inline-flex; align-items:center;">
    <input type="button" id="btn1" value="現在日時">
    <div id="date"></div>
    </div>
    <input type="button" id="btn2" value=" off ">  
</div>

<script type="text/javascript">
    $(function() {
        $("#btn1").on("click", function() {
            $("#date").html(new Date());
        });
    });
    $(function() {
        $("#btn1").on("mouseenter", function() {
            $("#date").addClass('flash');
        });
    });
    $(function() {
        $("#btn2").on("click", function() {
            $("#date").html("");
            $("#btn1").off();
        });
    });
</script>

この場合要素$btn1に紐づいているのは13行目〜15行目だけではなく18行目〜20行目もあるのでこれも無効にします。