同时按下键并单击答案

【问题标题】：Key pressed and click in the same time同时按下键并单击
【发布时间】：2015-05-25 18:57:46
【问题描述】：

如何合并按键和点击？我的意思是当用户同时按下回车键并单击某处时，我需要调用一个函数。

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

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

【问题讨论】：

如果它是 ENTER 则标记 keydown（在 keyup 上取消标记），并检查单击处理程序中的标记。一些special keys can be detected 也直接在点击处理程序中。
你的意思是你想对点击做出反应而按下回车键？

标签： javascript jquery

【解决方案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;，因为 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;
}

【讨论】：

【解决方案2】：

下面是一个例子，如果先按下 enter 或者先点击鼠标，或者两者都在一定的时间间隔内按下（我将其设置为 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

【讨论】：

【解决方案3】：

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

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

【讨论】：

注意，这个解决方案需要使用underscore.js库。
如果我错了，请纠正我，但它们看起来像两个不同的库。
lodash和下划线有类似的功能，但有轻微 differences

【解决方案4】：

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

Demo

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

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


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

【讨论】：