【jquery】jqueryを使って発生したイベントをキャンセルしてみる

ボタンをクリックすると、クリックイベントが発生するのは当たり前ですよね・・
リンクをクリックすると、リンクに設定されているページに遷移しますよね。

ここでは、リンクをクリックしても設定されているページに遷移しない方法を試してみます。

どんなときに使うか・・・

例えば、規約に同意するチェックボックスがONにされないと、リンクさせないとか。。
とある画面のプレビューを表示するような機能を作った場合、
プレビューなので、公開時と同じ見え方にしたいが、ボタンやリンクを押されたくないとか。
ということでサンプルです。

サンプルソース

リンク１（yahooに遷移）

リンク２（yahooに遷移）

リンク１は普通に画面遷移しますが、リンク２は遷移せず何も起こらないと思います。
aタグの違いは、idくらいで他は一緒なのに。。

ということで、イベントの発生をキャンセル（中断）させる場合に使うのが、

e.preventDefault();

こちらですね。

http://api.jquery.com/event.preventdefault/
こんな感じです。