我怎么能确定哪个 Ctrl/ Shift/Alt下面的代码键被按下？
$("#my_id").click(function() {
if (<left control key is pressed>) { alert("Left Ctrl"); }
if (<right shift and left alt keys are pressed>) { alert("Right Shift + Left Alt"); }
});
在“单击”事件上检查 Ctrl / Shift / Alt 键
IT技术
javascript
jquery
html
firefox3.6
2021-02-10 23:50:20
6个回答
好吧，这不适用于仅 IE 8 的所有浏览器。Microsoft 实现了确定按下哪个（右/左）键的功能。这是一个链接http://msdn.microsoft.com/en-us/library/ms534630(VS.85).aspx
我还发现了这篇关于浏览器中 keypress、keyup、keydown 事件的精彩文章。 http://unixpapa.com/js/key.html
$('#someelement').bind('click', function(event){
if(event.ctrlKey) {
if (event.ctrlLeft) {
console.log('ctrl-left');
}
else {
console.log('ctrl-right');
}
}
if(event.altKey) {
if (event.altLeft) {
console.log('alt-left');
}
else {
console.log('alt-right');
}
}
if(event.shiftKey) {
if (event.shiftLeft) {
console.log('shift-left');
}
else
{
console.log('shift-right');
}
}
});
$('#someelement').bind('click', function(event){
if(event.ctrlKey)
console.log('ctrl');
if(event.altKey)
console.log('alt');
if(event.shiftKey)
console.log('shift');
});
我不知道是否可以在单击事件中检查左/右键，但我认为这是不可能的。
e.originalEvent.location左键返回 1，右键返回 2。因此，您可以检测modifier按下了哪个键，如下所示。希望这会帮助你。
var msg = $('#msg');
$(document).keyup(function (e) {
if (e.keyCode == 16) {
if (e.originalEvent.location == 1)
msg.html('Left SHIFT pressed.');
else
msg.html('Right SHIFT pressed.');
} else if (e.keyCode == 17) {
if (e.originalEvent.location == 1)
msg.html('Left CTRL pressed.');
else
msg.html('Right CTRL pressed.');
} else if (e.keyCode == 18) {
if (e.originalEvent.location == 1)
msg.html('Left ALT pressed.');
else
msg.html('Right ALT pressed.');
e.preventDefault(); //because ALT focusout the element
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Press modifier key: </label>
<strong id="msg"></strong>在大多数情况下，ALT, CTRL, 和SHIFTkey 布尔值将用于查看是否按下了这些键。例如：
var altKeyPressed = instanceOfMouseEvent.altKey
当被调用时，它将返回 true 或 false。有关更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey
为了将来参考，还有一个称为metaKey（仅限 NS/firefox）的方法在按下元键时起作用。
根据我的评论，这是可能的解决方案。
要检查按下了哪个特定的修饰键，您可以使用 KeyboardEvent Location（请参阅表支持）
为了支持 IE8，幸运的是你可以使用已经发布的解决方案。
现在的解决方法是设置一个具有相关属性的全局对象，该属性与哪些修饰键被保持有关。不使用全局对象的其他方式当然是可能的。
在这里，我使用相关的 javascript 侦听器方法捕获事件（jQuery 不支持捕获阶段）。我们捕获事件以处理keydown/keyup由于某种原因已在使用中的代码将停止事件传播的情况。
/* global variable used to check modifier keys held */
/* Note: if e.g control left key and control right key are held simultaneously */
/* only first pressed key is handled (default browser behaviour?)*/
window.modifierKeys = (function() {
/* to handle modifier keys except AltGr which is key shortcut for controlRight + alt */
var mKeys = {};
/* to fire keydown event only once per key held*/
var lastEvent, heldKeys = {};
// capture event to avoid any event stopped propagation
document.addEventListener('keydown', function(e) {
if (lastEvent && lastEvent.which == e.which) {
return;
}
lastEvent = e;
heldKeys[e.which] = true;
setModifierKey(e);
}, true);
// capture event to avoid any event stopped propagation
document.addEventListener('keyup', function(e) {
lastEvent = null;
delete heldKeys[e.which];
setModifierKey(e);
}, true);
function setModifierKey(e) {
mKeys.alt = e.altKey;
mKeys.ctrlLeft = e.ctrlKey && e.location === 1;
mKeys.ctrlRight = e.ctrlKey && e.location === 2;
mKeys.shiftLeft = e.shiftKey && e.location === 1;
mKeys.shiftRight = e.shiftKey && e.location === 2;
}
return mKeys;
})();
/* on div click, check for global object */
$('.modifierKey').on('click', function() {
console.log(modifierKeys);
/* for demo purpose */
$('.info').text(function() {
var txt = [];
for (var p in modifierKeys) {
if (modifierKeys[p]) txt.push(p);
}
return txt.toString();
});
})/* for demo purpose */
.info:not(:empty) {
border: 1px solid red;
padding: .1em .5em;
font-weight: bold;
}
.info:not(:empty):after {
content: " held";
font-weight: normal;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modifierKey" tabindex="-1">
DIV to catch modifier keys on click
</div>
<br>
<span class="info"></span>作为旁注：
- ALT GRkey 是CTRL-Right&ALT 键的快捷键
- 同时按住两个相同的修饰键（例如 Shift-Left 和 Shift-Rigth 键），只会导致处理第一个（似乎是默认的浏览器行为，所以无论如何，看起来是对的！）
其它你可能感兴趣的问题