web-dev-qa-db-ja.com

マウスダウン時に右マウスボタンイベントを検出するにはどうすればよいですか?

ドラッグ可能なスクリプトの機能を更新/デバッグおよび拡張しており、次の結果を達成できる必要があります。

whatever.onRightMouseButtonMousedown = preventDefault();

私は役に立たないように多くの調査を行いましたが、jquery-ui draggableを使用すると、マウスの右ボタンでマウスを押したときに要素をドラッグする機能が妨げられるため、これが可能であることがわかります。私はこの能力を模倣し、それがどのように機能するかを学び、必要に応じて現在そして将来的にそれを実装できるようにしたいと考えています。

注:jqueryまたはjquery-ui draggableの使用方法に関する情報は提供しないでください(既に知っています)。それらの実装方法や、検出の実装方法を知りたいです。要素がマウスの右ボタンでドラッグされるのを防ぐことができるように、マウスの右ボタンでマウスダウンします。

21
person0

通常、何らかの種類のマウスイベントがある場合は、1種類のマウスクリックでのみ動作するようにします。したがって、コールバックに渡されるイベントには、クリックのタイプを区別できるプロパティがあります。

このデータは、イベントデータのbuttonプロパティを介して渡されます。どの値がどのデータを表しているかを調べるには、 [〜#〜] mdn [〜#〜] を参照してください。

したがって、右クリックを無効にするのではなく、左クリックに対してのみ機能を有効にします。次に[悪い]例を示します。

element.onmousedown = function(eventData) {
  if (eventData.button === 1) {
      alert("From JS: the (left?) button is down!")
  }
}  

jQueryで同等のものは次のとおりです。

$("div").mousedown(function(eventData) {
    if (eventData.which === 1) {
        alert("From JQuery: which=" + de.which)
    }
});

Jqueryを使用しない場合、返される値はブラウザによって異なります。 jQuery ブラウザ間で値を統合する 、左に1、中央に2、右に3を使用:

 element.onmousedown = function(eventData) {
   if (eventData.button === 0) {
     console.log("From JS: the (left?) button is down!")
   }
 }

 $("#element").ready(function() {
   $("div").mousedown(function(de) {
     console.log("From JQuery: which=" + de.which);
   });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element" style="width: 100px; height: 100px; background-color: blue" />
29
FriendlyGuy

Html:

<a href="#" onmousedown="mouseDown(event);">aaa</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

JavaScript:

function mouseDown(e) {
  e = e || window.event;
  switch (e.which) {
    case 1: alert('left'); break;
    case 2: alert('middle'); break;
    case 3: alert('right'); break; 
  }
}​

デモ

6
atiruz

それほど単純ではありません。 Quirksmode.orgには イベントプロパティに関する記事 があります。

「どのマウスボタンがクリックされましたか?」/'右クリック'。ブラウザによって異なります。

3
andrewmu