右击是Javascript事件吗?如果是,我该如何使用它?
当前回答
是的,oncontextmenu可能是最好的选择,但请注意,它在鼠标向下时触发,而单击将在鼠标向上时触发。
其他相关的问题是关于双击右键的——显然除了手动计时器检查外,不支持双击右键。您可能希望能够右双击的一个原因是,如果您需要/想要支持左手鼠标输入(按钮反转)。浏览器实现似乎对我们应该如何使用可用的输入设备做了很多假设。
其他回答
在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>
是的,虽然w3c说右键点击可以通过点击事件检测到,onClick不是通过在通常的浏览器中单击右键触发的。
事实上,右键只触发onMouseDown onMouseUp和onContextMenu。
因此,您可以将“onContextMenu”视为右键单击事件。它是一个HTML5.0标准。
使用jQuery库处理事件
$(window).on("contextmenu", function(e)
{
alert("Right click");
})
如果您想检测鼠标右键单击,就不应该使用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
下面的代码使用jQuery生成一个基于默认鼠标下拉和鼠标上拉事件的自定义右键单击事件。 它考虑到以下几点:
鼠标悬停时触发 仅当鼠标按下之前的同一元素时触发 这段代码特别适用于JFX Webview(因为上下文菜单事件不会在那里触发) 当键盘上的上下文菜单键被按下时,它不会触发(就像on('contextmenu',…)的解决方案一样)
$(function () { // global rightclick handler - trigger custom event "rightclick" var mouseDownElements = []; $(document).on('mousedown', '*', function(event) { if (event.which == 3) { mouseDownElements.push(this); } }); $(document).on('mouseup', '*', function(event) { if (event.which == 3 && mouseDownElements.indexOf(this) >= 0) { $(this).trigger('rightclick'); } }); $(document).on('mouseup', function() { mouseDownElements.length = 0; }); // disable contextmenu $(document).on('contextmenu', function(event) { event.preventDefault(); }); }); // Usage: $('#testButton').on('rightclick', function(event) { alert('this was a rightclick'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="testButton">Rightclick me</button>