右击是Javascript事件吗?如果是,我该如何使用它?
当前回答
大多数使用mouseup或上下文菜单事件的给定解决方案在每次鼠标右键上升时触发,但它们不会检查鼠标右键之前是否下降。
如果您正在寻找一个真正的右键单击事件,该事件仅在同一元素中按下并释放鼠标按钮时触发,那么您应该使用auxclick事件。由于这将触发每个非主鼠标按钮,您还应该通过检查按钮属性过滤其他事件。
窗口。addEventListener("auxclick", (event) => { 如果事件。button === 2) alert("Right click"); });
你也可以通过在JavaScript开头添加以下代码来创建自己的右键事件:
{
const rightClickEvent = new CustomEvent('rightclick', { bubbles: true });
window.addEventListener("auxclick", (event) => {
if (event.button === 2) {
event.target.dispatchEvent(rightClickEvent);
}
});
}
然后你可以通过addEventListener方法监听右键事件,如下所示:
your_element.addEventListener("rightclick", your_function);
在MDN上阅读更多关于auxclick事件的信息。
其他回答
如果您想检测鼠标右键单击,就不应该使用MouseEvent。哪个属性是不标准的,浏览器之间有很大的不兼容性。你应该使用MouseEvent.button。它返回一个表示给定按钮的数字:
0:主按钮按下,通常是左键或未初始化状态 1:辅助按钮按下,通常是车轮按钮或中间按钮(如果有) 2:二级按钮按下,通常是右键 3:第四个按钮,通常是浏览器返回按钮 4:第五个按钮,通常是浏览器前进按钮
MouseEvent。按钮处理的输入类型比标准鼠标更多:
按钮的配置可能与标准不同 “从左到右”的布局。配置为左撇子使用的鼠标可以 将按钮动作反转。有些指向设备只有一个 按钮,并使用键盘或其他输入机制来指示主, 二级、辅助性等。其他的可能有许多映射到的按钮 不同的功能和按钮值。
参考:
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
是的,这是一个Javascript事件,你可以用下面的代码测试它。
<div id="contextArea">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
var contextarea = $("#contextArea");
contextarea.contextmenu(function (e) {
e.preventDefault();
console.log("right click from p tag");
})
</script>
大多数使用mouseup或上下文菜单事件的给定解决方案在每次鼠标右键上升时触发,但它们不会检查鼠标右键之前是否下降。
如果您正在寻找一个真正的右键单击事件,该事件仅在同一元素中按下并释放鼠标按钮时触发,那么您应该使用auxclick事件。由于这将触发每个非主鼠标按钮,您还应该通过检查按钮属性过滤其他事件。
窗口。addEventListener("auxclick", (event) => { 如果事件。button === 2) alert("Right click"); });
你也可以通过在JavaScript开头添加以下代码来创建自己的右键事件:
{
const rightClickEvent = new CustomEvent('rightclick', { bubbles: true });
window.addEventListener("auxclick", (event) => {
if (event.button === 2) {
event.target.dispatchEvent(rightClickEvent);
}
});
}
然后你可以通过addEventListener方法监听右键事件,如下所示:
your_element.addEventListener("rightclick", your_function);
在MDN上阅读更多关于auxclick事件的信息。
添加一个e.preventDefault来阻止菜单出现(以防你不想要它) 窗口。Oncontextmenu =函数(e) { e.preventDefault (); 警报(“你点击”); } <标题>右键单击< / h1 >
正如其他人所提到的,可以通过通常的鼠标事件(鼠标下拉、鼠标上拉、单击)来检测鼠标右键。但是,如果您在弹出右键菜单时寻找触发事件,那么就找错地方了。右键单击/上下文菜单也可以通过键盘(shift+F10或上下文菜单键在Windows和一些Linux)访问。在这种情况下,你正在寻找的事件是oncontextmenu:
window.oncontextmenu = function ()
{
showCustomMenu();
return false; // cancel default menu
}
至于鼠标事件本身,浏览器为事件对象设置了一个属性,可以从事件处理函数中访问:
document.body.onclick = function (e) {
var isRightMB;
e = e || window.event;
if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
isRightMB = e.which == 3;
else if ("button" in e) // IE, Opera
isRightMB = e.button == 2;
alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
}
窗口。oncontextmenu - MDC