ホームページ > 記事 > ウェブフロントエンド > jQueryカスタム要素の右クリックイベント

jQueryカスタム要素の右クリックイベント

小云云オリジナル: 2018-01-17 13:11:451940ブラウズ

この記事では主にjQueryカスタム要素の右クリックイベント（実装事例）をお届けします。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ほとんどの場合、ページを操作するために左クリックを使用しますが、右クリックは主に開発者が要素を確認するために使用され、より良い対話性を実現するためにマウスの右クリックの動作をカスタマイズする必要がある場合もあります。左ボタンで漫画を送り、右ボタンで漫画を戻すことができます。

最初のステップは、ブラウザのデフォルトの右クリック動作をブロックすること、つまり、ポップアップボックスをブロックすることです。

まず、ポップアップブロック関数をターゲット要素にバインドします:

//阻止浏览器默认右键点击事件
$("p").bind("contextmenu", function(){
  return false;
})

このようにして、p 要素の右クリックイベントがブロックされますが、必要に応じてブラウザの他の領域には影響しません。ページ全体で右クリックイベントをブロックするには、クリックイベントを実行します。これを行うだけです:

document.oncontextmenu = function() {
  return false;
}

次に、右クリック応答関数を要素にバインドできます:

$("p").mousedown(function(e) {
  console.log(e.which);
  //右键为3
  if (3 == e.which) {
    $(this).css({
      "font-size": "-=2px"
    });
  } else if (1 == e.which) {
    //左键为1
    $(this).css({
      "font-size": "+=3px"
    });
  }
})

例の効果は、right- のフォントサイズです。クリックが縮小され、左クリックのフォントサイズが拡大され、その他の領域はデフォルトの右クリックイベントに応答できます。

完全なコード:

<head>
  <style type="text/css">
  p{
    font-size:20px;
  }
  </style>
  <script src="../jquery.js"></script>
  <script>
  $(function() {
    //阻止浏览器默认右键点击事件
    /*document.oncontextmenu = function() {
      return false;
    }*/
    //某元素组织右键点击事件
    $("p").bind("contextmenu", function(){
      return false;
    })
    $("p").mousedown(function(e) {
      console.log(e.which);
      //右键为3
      if (3 == e.which) {
        $(this).css({
          "font-size": "-=2px"
        });
      } else if (1 == e.which) {
        //左键为1
        $(this).css({
          "font-size": "+=3px"
        });
      }
    })
  })
  </script>
</head>

<body>
  <p>
    p
  </p>
</body>

jQueryカスタム要素の右クリックイベント

関連記事