小粋空間  -  a cheap joke and a play on words site

preventDefault()で無効にしたイベントを有効にする方法

preventDefault()で無効にしたイベントを有効にする方法を紹介します。

１．はじめに

preventDefault()は、「preventDefault()について」で紹介したとおり、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。

が、preventDefault()でイベントキャンセルしたあと、再びイベントを有効にする方法が分かりません。

ということで、preventDefault()で無効にしたイベントを有効にする方法について紹介します。

２．jQueryを使ってpreventDefault()で無効にしたリンクを有効にする

ここではa要素を使って、preventDefault()で無効にしたリンク先への遷移を再び有効にするサンプルを用います。

jQueryでは、preventDefault()メソッドをon()とoff()と組み合わせて有効・無効を切り替えます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('#on').click(function(){
        $("a").on('click', myHandler);
    });
    $('#off').click(function(){
        $("a").off('click', myHandler);
    });
});
function myHandler(e){
    e.preventDefault();
}
</script>
<a href="https://www.koikikukan.com/">リンク</a>
<button id="on">無効</button>
<button id="off">有効</button>

「ONにする」ボタンをクリックすると、preventDefault()を有効にし、a要素をクリックしてもリンク先に遷移しなくなります。

「OFFにする」ボタンをクリックすると、preventDefault()を無効にし、a要素をクリックするとリンク先に遷移できるようになります。

３．JavaScriptでpreventDefault()で無効にしたリンクを有効にする

JavaScriptの場合、リンクの無効化はaddEventListener()、再び有効にするにはremoveEventListener()を利用します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function on_event() {
    document.getElementById('test').addEventListener('click', myHandler, false );
}
function off_event() {
    document.getElementById('test').removeEventListener('click', myHandler, false );
}
function myHandler(e){
    e.preventDefault();
}
</script>
<a id="test" href="https://www.koikikukan.com/">リンク</a>
<button onclick="on_event()">無効</button>
<button onclick="off_event()">有効</button>

認識誤りがありましたらどこかでつぶやいてください。

４．参考サイト

• addEventListener
• removeEventListener