如何使用 jQuery 检查在 click 事件期间是否按下了键？

我想捕捉一个与 jQuery 的点击事件，并能够告诉如果一个键是在同一时间按下，所以我可以叉回调函数的基础上按键事件。

For example:

$("button").click(function() {
if([KEYPRESSED WHILE CLICKED]) {
// Do something...
} else {
// Do something different...
}
});

这可能吗? 如果可能的话，怎样才能做到呢？

88417 次浏览
小开

您需要使用 keydown()和 keyup()分别跟踪密钥状态:

var ctrlPressed = false;
$(window).keydown(function(evt) {
if (evt.which == 17) { // ctrl
ctrlPressed = true;
}
}).keyup(function(evt) {
if (evt.which == 17) { // ctrl
ctrlPressed = false;
}
});

看看 密钥编码清单。现在你可以检查一下:

$("button").click(function() {
if (ctrlPressed) {
// do something
} else {
// do something else
}
});
小开

您可以很容易地从事件属性中检测到 shift、 alt 和控制键;

$("button").click(function(evt) {
if (evt.ctrlKey)
alert('Ctrl down');
if (evt.altKey)
alert('Alt down');
// ...
});

有关更多属性，请参见 离奇莫德。如果要检测其他键，请参见 Cletus 的回答。

小开

我可以单独使用 JavaScript

 <a  href="" onclick="return Show(event)"></a>


function Show(event) {
if (event.ctrlKey) {
alert('Ctrl down');
}
}
小开

在不窃取 @ Arun Prasad 的闪电的情况下，下面是我重新散列以停止默认操作的纯 JS 代码片段，否则，如果按下 CTL + click，该代码片段将打开一个新窗口。

function Show(event)
{
if (event.ctrlKey)
{
alert('Ctrl held down which clicked');
}
else
{
alert('Ctrl NOT pressed');
}
return false
}
<p>Hold down CTL on the link to get a different message</p>


<a href="" onclick="return Show(event)">click me</a>

小开 

let isCtrlClicked = false;
let selectedContainer = [];
document.addEventListener("keydown", function(e) {
if (e.key === "Control") {
isCtrlClicked = true;
}
});


document.addEventListener("keyup", function(e) {
if (e.key === "Control") {
isCtrlClicked = false;
selectedContainer.forEach(item => {
item.elem.style.backgroundColor = "";
item.elem.dataset.isAlreaySelected = "0";
delete item.elem.dataset.position;
});
selectedContainer = selectedContainer.filter(item => item.active);
console.log(selectedContainer);
selectedContainer = [];
}
});


const main = document.getElementById("main");
for (let i = 0; i < main.childElementCount; i++) {
main.children[i].dataset.isAlreaySelected = "0";
main.children[i].addEventListener("click", function(e) {
const isAlreaySelected = e.currentTarget.dataset.isAlreaySelected;
const position = parseInt(e.currentTarget.dataset.position);
if (isCtrlClicked && isAlreaySelected == "0") {
e.currentTarget.style.backgroundColor = "rgba(0,0,200,0.2)";
selectedContainer.push({
elem: e.currentTarget,
active: true
});
e.currentTarget.dataset.position = selectedContainer.length - 1;
e.currentTarget.dataset.isAlreaySelected = "1";
} else {
e.currentTarget.style.backgroundColor = "";
if (position > -1) {
e.currentTarget.dataset.isAlreaySelected = "0";
delete e.currentTarget.dataset.position;
selectedContainer[position].active = false;
}
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


#main {
display: flex;
}


#main>div {
display: flex;
align-items: center;
justify-content: center;
padding: auto;
text-align: center;
border: 1px solid grey;
width: 100px;
height: 100px;
margin: 1rem;
}
<div id="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>


提交答案