我怎么能确定哪个 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下面的代码键被按下?
$("#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"); }
});
Answers:
好吧,这仅适用于IE 8,因此无法在所有浏览器中使用。Microsoft实现了确定按下哪个(右/左)键的功能。这是链接http://msdn.microsoft.com/zh-cn/library/ms534630(VS.85).aspx
我还发现了这篇关于浏览器中的按键,按键,按键事件的奇妙文章。 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>
event.location
或event.keyLocation
可能的备用event.ctrlLeft
语法。
e.originalEvent.location
在Chrome和Firefox中为我工作。@Mac
keyup
……如果您想知道是否Ctrl
在期间被按下(按住)click
,则需要使用keydown
并设置一个标志,然后可以在单击侦听器中签入。重置中的标志keyup
。
在大多数情况下ALT,CTRL和SHIFT关键布尔将工作,看是否被按这些键。例如:
var altKeyPressed = instanceOfMouseEvent.altKey
调用时,它将返回true或false。有关更多信息,请访问https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/altKey
供将来参考,还有一个称为metaKey
(仅适用于NS / firefox),当按下meta键时可以使用。
click
不会触发该事件,因此,引用该altKey
属性的函数将永远不会被执行。
根据我的评论,这是可能的解决方案。
要检查按下了哪个特定的修饰键,可以使用 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>
作为旁注:
您现在也可以使用MouseEvent.getModifierState()
它-撰写本文时,大多数浏览器都支持它。
document.addEventListener("click", (evn) => {
const shift = evn.getModifierState("Shift");
const ctrl = evn.getModifierState("Control");
const alt = evn.getModifierState("Alt");
console.log("Mouse pressed! Modifiers:");
console.table({shift, ctrl, alt});
});
shift
,ctrl
和alt
。但是,由于先天平台的差异,不同操作系统之间的特定行为有些不稳定。使用它们之前,请先检查这里。使用js-hotkeys。这是一个jQuery插件。
这是一个测试,以显示您要查找的内容。它还显示了如何捕获标准的左,右,上,下键以及数字键盘(数字为2,4,6,8的键盘)中的键! http://afro.systems.googlepages.com/test-static-08.html
奇迹般有效!以及在Chrome,Firefox,IE和Edge上也是如此;)https://jsfiddle.net/55g5utsk/2/
var a=[];
function keyName(p){
var cases = {16:'Shift',17:'CTRL',18:'Alt'};
return cases[p] ? cases[p] : 'KeyCode: '+p;
}
function keyPosition(p){
var cases = {1:'Left',2:'Right'};
return cases[p] ? cases[p]+' ' : '';
}
$('input').on('keydown',function(e){
a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('input').on('keyup',function(){
var c='';
var removeDuplicates = [];
$.each(a, function(i, el){
if ($.inArray(el, removeDuplicates) === -1) {
removeDuplicates.push(el);
c=c+(el)+' + ';
}
});
a=[];
alert(c.slice(0, -3))
});
以下是带有点击事件的版本 http://jsfiddle.net/2pL0tzx9/
var a=[];
function keyName(p){
var cases = {16:'Shift',17:'CTRL',18:'Alt'};
return cases[p] ? cases[p] : '';
}
function keyPosition(p){
var cases = {1:'Left',2:'Right'};
return cases[p] ? cases[p]+' ' : '';
}
$(document).on('keydown',function(e){
a.push(keyPosition(e.originalEvent.location)+keyName(e.keyCode));
})
$('#my_id').on('click',function(){
var c='';
var removeDuplicates = [];
a =a.filter(function(v){return v!==''});
$.each(a, function(i, el){
if ($.inArray(el, removeDuplicates) === -1){
removeDuplicates.push(el);
c=c+(el)+' + ';
}
});
if (c) alert(c.slice(0, -3));
a=[];
});
有一些原因,左,右CTRL,SHIFT及ALT键是没有区别,因为1键编码是相同2.许多笔记本电脑的键盘可能不会采取了两个参考控制键: 我怎么能知道一个事件来自右Ctrl键?
event.originalEvent.location
。然后,我想实现单击的逻辑并不难,只需在击键/击键事件中设置一些标志/对象,然后在单击时进行检查即可。问题可能是处理altGr
可能产生不一致结果的密钥。如果我有时间,我会在后面回答...