Question

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

whatever.onRightMouseButtonMousedown = preventDefault();

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

注意：请不要向我提供有关如何使用jquery或jquery-ui draggable的信息（我已经熟悉它），我想了解它们是如何实现的，或者如何实现检测用鼠标右键单击mousedown，这样我就可以用鼠标右键阻止元素被拖拽。

Answer 1

通常，当您有任何类型的鼠标事件时，您只希望它只能在一种类型的鼠标点击上运行。因此，传递给回调的事件具有一个属性，允许您区分点击类型。

此数据通过事件数据的按钮属性传回。请参阅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 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" />

Answer 2

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

demo。

Answer 3

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

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

如何在mousedown上检测到rightmouse按钮事件？

3 个答案: