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

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

Posted at August 20,2014 12:55 AM
Tag:[JavaScript, jQuery, preventDefault]

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

1.はじめに

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

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

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

2.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="http://www.koikikukan.com/">リンク</a>
<button id="on">無効</button>
<button id="off">有効</button>

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

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

3.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="http://www.koikikukan.com/">リンク</a>
<button onclick="on_event()">無効</button>
<button onclick="off_event()">有効</button>

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

4.参考サイト

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)