javascript – 如何在mousedown上检测到右键按钮事件？

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

whatever.onRightMouseButtonMousedown = preventDefault();

我已经做了大量的研究,但是,我知道这是可以做到这一点,因为当我使用jquery-ui draggable时,它阻止了当你用鼠标右键拖动元素时拖动元素的能力.我想模仿这种能力,并学习它的工作原理,以便我可以在现在和将来根据需要实现它.

注意：请不要给我有关如何使用jquery或jquery-ui draggable的信息(我已经熟悉它),我想了解它们如何实现,或者如何可以实现对mousedown的检测.鼠标按钮,以便我可以通过鼠标右键来防止元素被破坏.

解决方法

通常当您有任何类型的鼠标事件时,您只需要使用鼠标即可.因此,传递给您的回调的事件有一个属性,您可以区分点击类型.

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