jQuery 如何从 onclick div 属性检测 Javascript 中的 control+click？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16190455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect control+click in Javascript from an onclick div attribute?
提问by BrownChiLD
I need to know if the user is clicking or CONTROL CLICKING a div element.. i have seen examples on how to do it using event listeners.. but my codes are already set in place, and is using an on-element onclickmethod..
我需要知道，如果用户点击或控制单击div元素..我已经看到了如何使用事件侦听器来做到这一点的例子..但我的代码已经到位设置，并使用上元素的onclick方法。 .
HTML
HTML
<div id='1' onclick='selectMe()'>blah</div>
JS
JS
function selectMe(){
//determine if this is a single click, or a cntrol click
}
...also would love to know if it was a left or right mouse button click.
...也很想知道这是鼠标左键单击还是右键单击。
采纳答案by MasNotsram
I'd recommend using JQuery's keyup and keydown methods on the document, as it normalizes the event codes, to make one solution crossbrowser.
我建议在文档上使用 JQuery 的 keyup 和 keydown 方法，因为它规范了事件代码，以制作一个跨浏览器的解决方案。
For the right click, you can use oncontextmenu, however beware it can be buggy in IE8. See a chart of compatibility here:
对于右键单击，您可以使用 oncontextmenu，但要注意它在 IE8 中可能有问题。在此处查看兼容性图表：
http://www.quirksmode.org/dom/events/contextmenu.html
http://www.quirksmode.org/dom/events/contextmenu.html
<p onclick="selectMe(1)" oncontextmenu="selectMe(2)">Click me</p>
$(document).keydown(function(event){
if(event.which=="17")
cntrlIsPressed = true;
});
$(document).keyup(function(){
cntrlIsPressed = false;
});
var cntrlIsPressed = false;
function selectMe(mouseButton)
{
if(cntrlIsPressed)
{
switch(mouseButton)
{
case 1:
alert("Cntrl + left click");
break;
case 2:
alert("Cntrl + right click");
break;
default:
break;
}
}
}
回答by Bj?rn Roberg
In your handler, check the window.eventobject for the property ctrlKeyas such:
在您的处理程序中，检查window.event该属性的对象，ctrlKey如下所示：
function selectMe(){
if (window.event.ctrlKey) {
//ctrl was held down during the click
}
}
UPDATE:the above solution depends on a proprietary propertyon the window object, which perhaps should not be counted on to exist in all browsers. Luckily, we now have a working draftthat takes care of our needs, and according to MDN, it is widely supported. Example:
更新：上述解决方案依赖于window 对象的专有属性，可能不应该指望所有浏览器都存在该属性。幸运的是，我们现在有一个满足我们需求的工作草案，并且根据 MDN，它得到了广泛的支持。例子：
HTML
HTML
<span onclick="handler(event)">Click me</span>
JS
JS
function handler(ev) {
console.log('CTRL pressed during click:', ev.ctrlKey);
}
The same applies for keyboard events
See alsoKeyboardEvent.getModifierState()
回答by Andrew
Because it's been a several years since this question was first asked, the other answers are outdated or incomplete.
因为这个问题已经有好几年了，其他答案已经过时或不完整。
Here's the code for a modern implementation using jQuery:
这是使用 jQuery 的现代实现的代码：
$( 'div#1' ).on( 'click', function( event ) {
if ( event.ctrlKey ) {
//is ctrl + click
} else {
//normal click
}
} );
As for detecting right-clicks, this was correctly provided by another user but I'll list it here just to have everything in one place.
至于检测右键单击，这是由另一位用户正确提供的，但我将在此处列出它只是为了将所有内容都放在一个地方。
$( 'div#1' ).on( 'contextmenu', function( event ) {
// right-click handler
} ) ;
回答by Kranthi Samala
When there is a mouse click ctrlKeyis event attribute which can be accessed as e.ctrlKey.
Look down for example
当鼠标点击时ctrlKey是事件属性，可以作为 e.ctrlKey 访问。
Look down for example
$("xyz").click(function(e)){
if(e.ctrlKey){
//if ctrl key is pressed
}
else{
// if ctrl key is not pressed
}
}
回答by Arnelle Balane
Try this:
尝试这个：
var control = false;
$(document).on('keyup keydown', function(e) {
control = e.ctrlKey;
});
$('div#1').on('click', function() {
if (control) {
// control-click
} else {
// single-click
}
});
And the right-click triggers a contextmenuevent, so:
并且右键单击会触发一个contextmenu事件，因此：
$('div#1').on('contextmenu', function() {
// right-click handler
})
回答by Ferhat KO?ER
Try this code,
试试这个代码，
$('#1').on('mousedown',function(e) {
if (e.button==0 && e.ctrlKey) {
alert('is Left Click');
} else if (e.button==2 && e.ctrlKey){
alert('is Right Click');
}
});
Sorry I added e.ctrlKey.
抱歉，我添加了e.ctrlKey。
回答by Arun Prasad E S
From above only , just edited so it works right away
仅从上面，刚刚编辑，所以它马上工作
<script>
var control = false;
$(document).on('keyup keydown', function (e) {
control = e.ctrlKey;
});
$(function () {
$('#1x').on('click', function () {
if (control) {
// control-click
alert("Control+Click");
} else {
// single-click
alert("Single Click");
}
});
});
</script>
<p id="1x">Click me</p>
回答by Deez
You cannot detect if a key is down after it's been pressed. You can only monitor key events in js. In your case I'd suggest changing onclickwith a key press event and then detecting if it's the control key by event keycode, and then you can add your click event.
您无法检测按键是否在按下后按下。js中只能监听关键事件。在您的情况下，我建议更改onclick按键事件，然后通过事件键码检测它是否是控制键，然后您可以添加点击事件。
回答by jazz
pure javascript:
纯javascript：
var ctrlKeyCode = 17;
document.keydown(function(event){
if(event.which=="17")
cntrlIsPressed = true;
});
document.keyup(function(){
cntrlIsPressed = false;
});
var cntrlIsPressed = false;
function selectMe(mouseButton)
{
if(cntrlIsPressed)
{
switch(mouseButton)
{
case 1:
alert("Cntrl + left click");
break;
case 2:
alert("Cntrl + right click");
break;
default:
break;
}
}
}
