Taste gedrückt und gleichzeitig klicken

Question

wie kann ich keypress und auf klicken? Ich meine, wenn ein Benutzer die Eingabe drückt und irgendwo in der gleichen Zeit klickt, muss ich eine Funktion aufrufen.

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

Ich habe diesen Code, aber ich bin nicht in der Lage, es zu fusionieren (in der Regel arbeite ich nicht mit jQuery/JavaScript).

Answer 1

So etwas kann den Trick

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

BTW: Es gibt keine Notwendigkeit, var code = e.keyCode || e.which; zu tun, da jQuery für Sie, dass löst. Sie können e.which in jedem Browser verwenden.

EDIT

Diese Version beliebige Reihenfolge des Schlüssels erlauben sollte gedrückt/Mausklick. Ich gehe davon aus, dass nur der linke Klick erfasst wird. Logic zu handhaben + Mausklick auf keydown und mousedown platziert ein (es bewegt keyup werden könnte und mouseup wenn macht mehr Sinn)

alert Geändert von console.log seit dem ersten verhindert mouseup Ereignis ausgelöst werden. Heutzutage haben wir hundert bessere Möglichkeiten, den Benutzern eine Nachricht zu zeigen, als integrierte Popup-Meldungen. Ich gehe also davon aus, dass es funktioniert, denn es ist keine Voraussetzung.

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

Es gibt keine Möglichkeit, Ereignisse zusammenzuführen. Sie könnten jedoch zum Beispiel debounce Ihr Handler. Zum Beispiel (unter Verwendung von lodash):

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

Answer 3

Sie die event.type verwenden können, um festzustellen, was das Ereignis

Demo

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

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


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

Answer 4

Hier ausgelöst ist ein Beispiel, das, wenn eingeben funktioniert ist zuerst gedrückt oder wenn die Maus zuerst geklickt wird oder wenn beide innerhalb einer bestimmten Zeitdifferenz gedrückt werden (ich setze es auf 100 ms, aber dies kann leicht angepasst werden):

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

Sehen Sie es auf JSFiddle