0

I have a button that fires a "stopstart" function (animation). I also want to have a mouseless method to do this so I've bound the same function to the space bar. This works.

However if focus is on the button, and I press space - both events fire, can't work out how to stop this (the keypress event fires first - in chrome..)

Eventlistener code:

document.getElementById("stopstart").addEventListener("click",
        function (event) {
            stopstart();
        }); //add event listener to "stopstart" button  

document.addEventListener("keypress",
        function (event) {
            if (event.keyCode === 32) { //space key
                stopstart();
            }
        }); //add spacekey event listener to document

I don't want to remove focus from the button, as I'd like to retain that functionality - the two events appear to be separately generated - so I haven't found how to detect that the click event was in fact generated by the space bar.

Is this solvable using without having to add temporary flags to catch it etc

user3375602
  • 1
  • 1
  • 1
  • But the question is since the click code is triggered, why do you need both he keypress and the click when the click would just work fine? Seems like you need a work around for something that is already working with one event listener. – epascarello Mar 03 '14 at 16:28
  • Please adapt this fiddle to reproduce the problem http://jsfiddle.net/4srzb/ – Paul S. Mar 03 '14 at 16:30
  • I updated the fiddle to show the problem: http://jsfiddle.net/4srzb/1/ – Paul S. Mar 03 '14 at 17:50
  • It occurred to me (after posting) that I could capture the keypress event on the button eg by adding: `document.getElementById("stopstart").addEventListener("keypress", function (event) { event.stopPropagation(); }); //capture key action event` I can prevent the keypress event bubbling up from the button - however I'm not sure if this will work in all browsers, all the time. It appears to work in chrome at the moment.. eg update fiddle - http://jsfiddle.net/4srzb/2/ -seems to work? – user3375602 Mar 03 '14 at 19:03
  • a `event.preventDefault();` should prevent the click event from firing. – yannicuLar Jan 12 '18 at 13:00

3 Answers3

3

The click location for key events is zero, zero so you can look for that. 

document.getElementById("stopstart").addEventListener("click",
    function (event) {
        var x = event.x || event.clientX;
        var y = event.y || event.clientY;
        if (!x && !y) {
            alert("key press");
            return false;
        }
        stopstart();
    });

http://jsfiddle.net/mScEC/

epascarello
  • 204,599
  • 20
  • 195
  • 236
  • Can't see any way of telling the difference between the two for sure so I think this is the only way to go and the chance of a false positive is tiny – Paul S. Mar 03 '14 at 17:51
0
     function (event) {
        if (event.pointerType !== "mouse") return;
         stopstart();
     }); //add event listener to "stopstart" button  

document.addEventListener("keypress",
     function (event) {
         if (event.keyCode === 32) { //space key
             stopstart();
         }
     }); //add spacekey event listener to document```
Jawad Lamin
  • 21
  • 5
  • Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Tyler2P Aug 16 '21 at 16:30
  • yeah, you are right next time I'll try to do my best to explain. thanks for your notice – Jawad Lamin Aug 23 '21 at 09:50
0

You can simply use event.preventDefault() inside keypress event Listener to prevent the Button Click event from getting triggered on keypress

e.g

document.addEventListener('keydown', function (e) {
    e.preventDefault();
    if (e.key === 'Enter') {
        try {
            // if expression is not evaluated then catch block will be executed
            screen.value = eval(screen.value);
        }
        catch (error) {
            console.log(error.message);
            screen.value = 'Invalid Operation';
        }
       
    }
})
Sabeel Khan
  • 1