如何在 mousedown 上检测鼠标右键事件？答案

【问题标题】：How can I detect a rightmouse button event on mousedown?如何在 mousedown 上检测鼠标右键事件？
【发布时间】：2012-03-20 06:15:55
【问题描述】：

我正在更新/调试和扩展我的可拖动脚本的功能，我需要能够实现以下结果：

whatever.onRightMouseButtonMousedown = preventDefault();

我做了很多研究都无济于事，但是，我知道这样做是可能的，因为当我使用 jquery-ui 可拖动时，它会阻止当你用鼠标右键按下鼠标时拖动元素的能力。我想模仿这种能力，并了解它是如何工作的，以便我现在和将来根据需要实施它。

注意：请不要给我关于如何使用 jquery 或 jquery-ui 可拖动的信息（我已经熟悉它），我想了解它们是如何实现的，或者如何实现检测用鼠标右键按下鼠标，这样我就可以防止用鼠标右键拖动元素。

【问题讨论】：

这不是重复的。问题是专门询问如何在不使用 jQuery 的情况下做到这一点。

标签： javascript mouseevent draggable jquery-ui-draggable right-click

【解决方案1】：

通常，当您有任何类型的鼠标事件时，您会希望它只对一种类型的鼠标单击进行操作。因此，传递给您的回调的事件有一个属性，可以让您区分点击类型。

此数据通过事件数据的 button 属性传回。请参阅MDN 了解哪些值代表哪些数据。

因此，您不会禁用右键单击，而是仅启用左键单击的功能。这是一个[可怜的]示例：

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

jQuery 中的等价物是：

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

请注意，如果您不使用 jquery，则返回的值会因浏览器而异。 jQuery unifies the values across browsers, 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" />

【讨论】：

谢谢，在回来查看您的评论之前，我实际上已经想通了，我只想添加它以使其跨浏览器（至少是现代浏览器）工作，您只需要检查 @ 987654328@ 和 event.button，这就是我最终解决它的方式：if (evt.which === 3 || evt.button === 2) {evt.preventDefault();
仅供参考，鼠标左键event.button === 0，鼠标滚轮event.button === 1，鼠标右键event.button === 2，如developer.mozilla.org/en-US/docs/Web/API/MouseEvent/…中所述

【解决方案2】：

HTML、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; 
  }
}

&lt;a href="#" onmousedown="mouseDown(event);"&gt;aaa&lt;/a&gt;

【讨论】：

【解决方案3】：

这不是很简单。 Quirksmode.org 有一个article about event properties。

查看“点击了哪个鼠标按钮？” / '右键点击'。因浏览器而异。

【讨论】：

我知道这是不久前的文章，但我点击了那个链接，看到“甚至 explorer 6 都不支持它”这句话意味着这篇文章是过时的。

【解决方案4】：

我也可以同时按下多个鼠标按钮。

要知道按下了哪些鼠标按钮，
你必须使用布尔代数运算符！

按以下步骤进行：

const
  divX   = document.querySelector('#divX')
, Buttons_status = 
    { left       : { key : 0b00001, isDown: false }  // Primary button   (usually the left button)
    , right      : { key : 0b00010, isDown: false }  // Secondary button (usually the right button)
    , center     : { key : 0b00100, isDown: false }  // Auxiliary button (usually the mouse wheel button or middle button) 
    , bt_Back    : { key : 0b01000, isDown: false }  // 4th button (typically the "Browser Back" button)
    , bt_Forward : { key : 0b10000, isDown: false }  // 5th button (typically the "Browser Forward" button) 
    }

function testingButtons(e)
  {
  let DownBtns = ''
  for (let bt in Buttons_status )
    {
    Buttons_status[bt].isDown = !!(Buttons_status[bt].key & e.buttons )

    if (Buttons_status[bt].isDown) DownBtns += ' ' + bt
    }
  console.log ('Down buttton(s) :', DownBtns ? DownBtns : 'none' ) 
  // console.log( Buttons_status )
  }
 
divX.onmousedown = testingButtons
divX.onmouseup   = testingButtons

document.body.oncontextmenu =_=> false  // for clear testing

#divX {
  display    : inline-block;
  background : lawngreen;
  margin     : .7em;
  padding    : 1em .7em;
  }
button {
  display        : inline-block;
  vertical-align : top;
  }
.as-console-wrapper {
  max-height: 1.6em !important; 
  }

<div id="divX"> 
  Do a mouse click anywhere here.
  <br><br>
  You can activate several buttons
  <br>
  <small>[do not release the previous button(s) when you press a new one]</small>
  <br><br>
  <small>(then realease just one of them)</small>
</div>

<button onclick="console.clear()">Clear</button>

【讨论】：