【jQuery入門】イベントオブジェクトを活用する

イベントオブジェクトとは

イベントオブジェクトとは、イベントが発生したときのさまざまな情報を詰め込んだ箱で、イベントが発生したときにブラウザが自動的に情報を収集して、オブジェクトにセットしてくれる

イベントオブジェクトを利用するために必要な手続きは、イベント処理を記述する際にイベントオブジェクトにアクセスするための引数を宣言しておくだけ

イベントオブジェクトの名前はeとするのが一般的。使用しない場合は省略しても構わない

コンテキストメニューを実装する

コンテキストメニューはul要素で定義

マウスクリックによって表示するコンテキストメニューの領域は、ul要素で定義している。コンテキストメニューはあとからマウスの位置に応じて表示位置を設定する必要があるので、cssのpositionプロパティをabsoluteを設定しておく

またdisplayプロパティをnoneにしデフォルトでは表示されないようにする

押されたマウスボタンの種類を検知する

スクリプト側ではページ全体($(document))に対して、３種類の処理を施している

まず、マウスボタンがクリックされた(mousedownイベントの)タイミングでコンテキストメニューを表示し、e.which===3で右クリックに限定している

自前のコンテキストメニューを閉じる

ページの任意の場所で左クリックされた場合、コンテキストメニューを非表示にする

<ul id="menu" class="context">
  <li><a href="">サポートサイト</a></li>
  <li><a href="">サンプル</a></li>
  <li><a href="">技術情報</a></li>
</ul>

$(function () {
  $(document)
    .mousedown(function (e) {
      if (e.which === 3) {
        // 右クリックだったら
        $("#menu").css({
          display: "block",
          top: e.pageY,
          left: e.pageX
        });
      }
    })
    .click(function (e) {
      if (e.which === 1) {
        // 左クリックだったら
        $("#menu").css("display", "none");
      }
    })
    .contextmenu(function (e) {
      // ブラウザ標準のコンテキストメニューを無効化する
      e.preventDefault();
    });
});

.context {
  position: absolute;
  display: none;
  padding: 0;
  border: 1px solid;
  background-color: white;
}

.context li {
  padding: 10px 5px 10px 10px;
  list-style: none;
  border-bottom-color: #ccc;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  font-size: small;
}

.context li a {
  text-decoration: none;
  color: black;
}

See the Pen
jQuery13-5 by shinjiezumi (@sezumi)
on CodePen.

イベント本来の動作を無効化するpreventDefaultメソッド

フォームを送信する際に確認する

<form id="form" action="" method="post">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

$(function () {
  $("#form").submit(function (e) {
    if (!confirm("送信しますか？")) {
      e.preventDefault();
    }
  });
});

See the Pen
jQuery14-1 by shinjiezumi (@sezumi)
on CodePen.

キー入力を無効化する

<form id="form2" action="">
  <input type="text" id="zip" name="zip" size="20">
</form>

$(function () {
  $("#form2").keypress(function (e) {
    const k = e.which;
    console.log(k);
    if (!((k >= 48 && k <= 57) || k === 45 || k === 8 || k === 0)) {
      // 0〜9、ハイフン、backspace、deleteのみの入力を認める
      e.preventDefault();
    }
  });
});

See the Pen
jQuery14-2 by shinjiezumi (@sezumi)
on CodePen.

ハイパーリンクでクリックイベントを処理する

<div id="list">
  <a href="https://placehold.jp/50x50.png">1</a>
  <a href="https://placehold.jp/60x60.png">2</a>
  <a href="https://placehold.jp/70x70.png">3</a>
  <a href="https://placehold.jp/80x80.png">4</a>
  <a href="https://placehold.jp/90x90.png">5</a>
</div>
<p><img id="big"></p>

$(function () {
  $("#big").attr("src", $("#list a:first-child").attr("href")); // 初期表示
  $("#list a").click(function (e) {
    // リンクがクリックされたら
    $("#big").attr("src", $(this).attr("href")); // 画像のリンクを上書き
    e.preventDefault(); // ブラウザ標準の動作をキャンセル
  });
});

See the Pen
jQuery14-3 by shinjiezumi (@sezumi)
on CodePen.