按下键并同时单击

Question

如何合并按键和点击？ 我的意思是当用户按下回车并在同一时间点击某处我需要调用一个功能。

$(document).keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13) {
        alert('keypress');
    }
});
$(document).on( "click", function() {
    alert('click');
});

我有这个代码，但我无法合并它（通常我不使用jQuery / javascript）。

Answer 1

像这样的东西可能会成功

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; var code = e.keyCode || e.which; 因为jQuery为你解决了这个问题。 您可以在任何浏览器上使用e.which 。

编辑

此版本应允许任何按键/鼠标点击顺序。 我假设只捕获了左键单击。 处理输入+鼠标点击的逻辑放在keydown和mousedown （如果更有意义的话，它可以移动到keyup和mouseup ）

console.log更改了alert ，因为第一个alert阻止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;
}

Answer 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>");
    }
}

在JSFiddle上看到它

Answer 3

没有办法“合并”事件。 但是你可以例如去掉你的处理程序。 例如（使用lodash ）：

var handler = _.debounce(function(event) { alert(event.type); }, 100);
$(document)
  .on('click', handler)
  .on('keypress', handler);

Answer 4

您可以使用event.type来确定触发事件的内容

演示

$(function(){
    $(document).on("click", ClickAndKeyPress);

  $(document).on("keypress", ClickAndKeyPress);
});


function ClickAndKeyPress(event){
  $("div").text(event.type);
}