按下键并同时单击

时间:2015-05-25 18:57:46

标签: javascript jquery

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

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

我有这段代码,但我无法合并(通常我不会使用jQuery / javascript)。

4 个答案:

答案 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

修改

此版本应允许任何按键/鼠标点击顺序。我假设只捕获了左键单击。处理输入+鼠标点击的逻辑位于keydownmousedown上(如果更有意义,可以将其移至keyupmouseup

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

JSFiddle

上查看

答案 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);
}