Event Cancel Function

JavaScriptのイベントキャンセル用Function。

使い所は様々だがちょっとした部分として多いのはこのページの右下にも表示されるようなクリックするとページのトップへ移動するようなリンクボタン。spanタグ等利用してボタンを作成するなら特に必要ないが、aタグでボタンを作成する場合、クリック後のブラウザのURLに#を表示させたくないケースで使用できる。

jQueryのonとoffを上手く利用すればある条件にならないとイベントを有効化させたくないケースなどでも応用できる。

[ Sample ]

以下のリンクとフォームのイベントをキャンセル

HTML

JavaScript

<form>
<a href="/">HOME</a>
<input type="text" name="name">
<input type="submit" name="submit">
</form>

$(function(){
    $('form a[href="/"]').on('click', handler);
    $('form').on('submit', handler);
});

/* Event Cancel Function */
var handler = function (evt) {
    evt.preventDefault();
};