如何合并按键和点击?我的意思是当用户按下回车并在同一时间点击某个地方我需要调用一个功能。
$(document).keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
alert('keypress');
}
});
$(document).on( "click", function() {
alert('click');
});
我有这段代码,但我无法合并(通常我不会使用jQuery / javascript)。
答案 0 :(得分:11)
这样的事情可能会成功
var pressingEnter = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
// enter is being pressed, set true to flag variable
pressingEnter = true;
}
},
keyup: function(e) {
if(e.which == 13) {
// enter is no longer pressed, set false to flag variable
pressingEnter = false;
}
},
click: function() {
if (pressingEnter) {
console.log('click and enter pressed');
}
}
});
顺便说一句:没有必要做var code = e.keyCode || e.which;
因为jQuery为你解决了这个问题。您可以在任何浏览器上使用e.which
。
修改强>
此版本应允许任何按键/鼠标点击顺序。我假设只捕获了左键单击。处理输入+鼠标点击的逻辑位于keydown
和mousedown
上(如果更有意义,可以将其移至keyup
和mouseup
)
alert
更改console.log
,因为第一次阻止mouseup
事件被触发。现在,我们有数百种更好的方式向用户显示消息,而不是内置的警报弹出窗口,所以我假设它不是必需的。
var pressingEnter = false;
var clickingMouseButton = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
pressingEnter = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
keyup: function(e) {
if(e.which == 13) {
pressingEnter = false;
}
},
mousedown: function(e) {
if (e.which == 1) {
clickingMouseButton = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
mouseup: function(e) {
if (e.which == 1) {
clickingMouseButton = false;
}
}
});
function clickAndEnterPressing() {
return pressingEnter && clickingMouseButton;
}
答案 1 :(得分:2)
这是一个例子,如果首先按下输入或者先点击鼠标,或者如果它们都在一定的时间间隔内被按下(我将其设置为100毫秒,但这可以很容易地调整),它将起作用:
var enterDown = false;
var mouseDown = false;
var lastEnter = false;
var lastMouseUp = false;
var triggerOnNextUp = false;
$(document).on({
keydown: function(e) {
enterDown = true;
},
keyup: function(e) {
if(e.which == 13) {
lastEnter = (new Date()).getTime();
enterDown = false;
detectEnterAndClick();
if (mouseDown) {
triggerOnNextUp = true;
}
}
},
mousedown: function() {
mouseDown = true;
},
mouseup: function() {
lastMouseUp = (new Date()).getTime();
mouseDown = false;
detectEnterAndClick();
if (enterDown) {
triggerOnNextUp = true;
}
}
});
function detectEnterAndClick() {
if (Math.abs(lastEnter - lastMouseUp) < 100 || triggerOnNextUp) {
// Reset variables to prevent from firing twice
triggerOnNextUp = false;
enterDown = false;
mouseDown = false;
lastEnter = false;
lastMouseUp = false;
$("body").append("Clicked and pushed enter<br>");
}
}
上查看
答案 2 :(得分:0)
没有办法合并&#39;事件。但是,您可以例如debounce您的处理程序。例如(使用lodash):
var handler = _.debounce(function(event) { alert(event.type); }, 100);
$(document)
.on('click', handler)
.on('keypress', handler);
答案 3 :(得分:0)
您可以使用event.type来确定触发事件的内容
<强> Demo 强>
$(function(){
$(document).on("click", ClickAndKeyPress);
$(document).on("keypress", ClickAndKeyPress);
});
function ClickAndKeyPress(event){
$("div").text(event.type);
}