右击是Javascript事件吗?如果是,我该如何使用它?
当前回答
您可能想尝试以下属性:
按钮- (caniuse); Which - (caniuse)(弃用)。
function onMouseDown(e)
{
if (e.which === 1 || e.button === 0)
{
console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
}
if (e.which === 2 || e.button === 1)
{
console.log('Middle mouse button at ' + e.clientX + 'x' + e.clientY);
}
if (e.which === 3 || e.button === 2)
{
console.log('Right mouse button at ' + e.clientX + 'x' + e.clientY);
}
if (e.which === 4 || e.button === 3)
{
console.log('Backward mouse button at ' + e.clientX + 'x' + e.clientY);
}
if (e.which === 5 || e.button === 4)
{
console.log('Forward mouse button at ' + e.clientX + 'x' + e.clientY);
}
}
window.addEventListener("mousedown", onMouseDown);
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
});
相关:演示
操作系统
On Windows and Linux there are modifier keys Alt, Shift and Ctrl. On Mac there’s one more: Cmd, corresponding to the property metaKey... Even if we’d like to force Mac users to Ctrl+click – that’s kind of difficult. The problem is: a left-click with Ctrl is interpreted as a right-click on MacOS, and it generates the contextmenu event, not click like Windows/Linux. So if we want users of all operating systems to feel comfortable, then together with ctrlKey we should check metaKey. For JS-code it means that we should check if (event.ctrlKey || event.metaKey)...
在本章中,我们将详细介绍鼠标事件及其属性……
来源:https://amazon.com/dp/B07DZWLPG9
其他回答
是的,它是!
function doSomething(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
alert('Rightclick: ' + rightclick); // true or false
}
没有,但是你可以检测到在"onmousedown"事件中使用了什么鼠标按钮…然后从那里判断它是否是一个“右键”。
在JQuery中,您可以使用以下代码检测它:
$('.target').on('contextmenu', function (evt) { evt.preventDefault(); }); $('.target').mouseup(function (evt) { if (evt.which === 3) { // right-click $(this).css("background-color","blue"); $(this).text("RIGHT"); } else if (evt.which === 1) { $(this).css("background-color","red"); $(this).text("LEFT"); } }); .target { display: inline-block; height: 100px; width: 100px; background: gray; text-align: center; color: white; font-size: 25px; vertical-align: middle; margin: 25px; } .container { width: 100%; height: 140px; background: #AAA; vertical-align: middle; text-align: center; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="target" id="target">Click</div> <div class="target" id="target">Right</div> <div class="target" id="target">Click me!</div> </div>
For track right click
window.oncontextmenu = () =>{
console.log("Right click")
}
仅适用于右键单击
这是最简单的方法,它可以在所有浏览器上运行,除了应用程序web视图,如(CefSharp铬等…). 我希望我的代码能帮助到你,祝你好运!
const contentToRightClick=document.querySelector("div#contentToRightClick"); //const contentToRightClick=window; //If you want to add it into the whole document contentToRightClick.oncontextmenu=function(e){ e=(e||window.event); e.preventDefault(); console.log(e); return false; //Remove it if you want to keep the default contextmenu } div#contentToRightClick{ background-color: #eee; border: 1px solid rgba(0,0,0,.2); overflow: hidden; padding: 20px; height: 150px; } <div id="contentToRightClick">Right click on the box !</div>