我正在更新/调试和扩展我的可拖动脚本的功能,我需要能够实现以下结果：
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" />
