【jQuery入門】イベントオブジェクトを極める

　複数のコンテキストメニューを表示する

テーブルの内外それぞれで右クリックをすると、クリックする場所によって異なるコンテキストメニューが表示される

<ul id="menu" class="context">
  <li><a href="">サポートサイト</a></li>
  <li><a href="">サンプル</a></li>
  <li><a href="">技術情報</a></li>
</ul>
<ul id="menu2" class="context">
  <li><a href="">サンプル</a></li>
  <li><a href="">問い合わせ</a></li>
  <li><a href="">FAQ</a></li>
</ul>

<table id="data" class="table">
  <thead>
    <tr>
      <th>タイトル</th>
      <th>付録CD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>本1</td>
      <td>○</td>
    </tr>
    <tr>
      <td>本2</td>
      <td></td>
    </tr>
    <tr>
      <td>本3</td>
      <td>○</td>
    </tr>
  </tbody>
</table>

$(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"
        });
        $("#menu2").css({
          display: "none"
        });
      }
    })
    .contextmenu(function (e) {
      // ブラウザ標準のコンテキストメニューを無効化する
      e.preventDefault();
    });

  $("#data").mousedown(function (e) {
    if (e.which === 3) {
      $("#menu2").css({
        display: "block",
        top: e.pageY,
        left: e.pageX
      });
      e.stopPropagation();
    }
  });
});

.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
jQuery14-4 by shinjiezumi (@sezumi)
on CodePen.

イベントのバブリングを止めるstopPropagationメソッド

イベントバブリングとは、下の階層の要素で発生したイベントが上の階層の要素にまで自動的に伝搬していくこと。

イベントが複数処理される場合があるため、stopPropagationメソッドを呼び出すことで、イベントのその要素のみで完結し、上の要素に伝搬されないようにする。

イベント処理に際して必要な情報を渡す

以下のように共通化することができる。

まず重複したイベント処理をonmousedown関数に切り出す。

e.data.expはイベント処理の際に、呼び出し元から渡されたexpというパラメータを受け取っている

<ul id="menu3" class="context">
  <li><a href="">サポートサイト</a></li>
  <li><a href="">サンプル</a></li>
  <li><a href="">技術情報</a></li>
</ul>
<ul id="menu4" class="context">
  <li><a href="">サンプル</a></li>
  <li><a href="">問い合わせ</a></li>
  <li><a href="">FAQ</a></li>
</ul>

<table id="data2" class="table">
  <thead>
    <tr>
      <th>タイトル</th>
      <th>付録CD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>本1</td>
      <td>○</td>
    </tr>
    <tr>
      <td>本2</td>
      <td></td>
    </tr>
    <tr>
      <td>本3</td>
      <td>○</td>
    </tr>
  </tbody>
</table>

$(function () {
  const onmousedown = function (e) {
    if (e.which === 3) {
      // 右クリックだったら
      $(e.data.exp).css({
        display: "block",
        top: e.pageY,
        left: e.pageX
      });
    }
    e.stopPropagation();
  };

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

  $("#data2").mousedown({ exp: "#menu4" }, onmousedown);
});

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

.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;
}