Key pressed and click at the same time

Question

how can i combine keystrokes and click? I mean, when the user presses the enter button and presses somewhere at the same time, I need to call the function.

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

I have this code, but I cannot merge it (usually I do not work with jQuery / javascript).

Answer 1

Something like this might do the 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: no need to do var code = e.keyCode || e.which; var code = e.keyCode || e.which; since jQuery allows this for you. You can use e.which in any browser.

EDIT

This version should allow any order of keystroke / mouse click. I assume that only the left click is locked. Logic for input input + mouse click is placed on keydown and mousedown (it can be moved to keyup and mouseup , if that makes sense)

Changed alert to console.log , since the first prevents the mouseup event. We currently have hundreds of better ways to show a message to the user than the built-in pop-up pop-ups, so I assume that it works for him, this is not a requirement.

 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

Here is an example that will work if the input is pressed first or if the mouse is clicked first or if they are both pressed within a certain time threshold (I set it to 100 ms, but this can be easily configured):

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

Look at JSFiddle

Answer 3

Unable to "combine" events. However, you can, for example, debounce the handler. For example (using lodash ):

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

Answer 4

you can use event.type to determine what caused the event

Demo

 $(function(){ $(document).on("click", ClickAndKeyPress); $(document).on("keypress", ClickAndKeyPress); }); function ClickAndKeyPress(event){ $("div").text(event.type); }