按下鍵並同時單擊

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