jQuery - デフォルトのイベントの無効化
公開日：2018-12-12
更新日：2019-05-14
更新日：2019-05-14
1. 概要
submit のボタンやリンクなどのデフォルトのイベントを無効にします。
$(セレクタ).on("イベント名", function(e){
e.preventDefault(); //または return false;
});
2. サンプル
リンクとボタンをクリックすると、文字列が表示されます。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<a href="https://9cubed.info/" style="color:skyblue;">https://9cubed.info/</a><br />
<br />
<form action="https://9cubed.info/">
<input type="submit" id="registry" value="登録" />
</form>
<br />
<div id="msg"></div>
<!-- Script -->
<script>
$(function() {
$("a").on("click", function(e){
$("#msg").text("リンクがクリックされました。");
//リンク先に飛ばないようにする
e.preventDefault(); //または return false;
});
$("#registry").on("click", function(e){
$("#msg").text("submit ボタンがクリックされました。");
//submitを無効にする
e.preventDefault(); //または return false;
});
});
</script>
</body></html>
実行結果：画面
