The AddEventListener Line doesn't work. What can I do?

Question

I want to disable CTRL + S in the browser, so I can save my game, but it doesn't work.

The code looks like this right now:

document.addEventListener("keydown", function(event) {
  if (event.ctrlKey && event.which == 83) { // ctrl + s
    event.preventDefault();
    saveGame();
  }
}, false);

The code for saveGame() is the following:

function saveGame() {
  var gameSave = {
    score: score,
    clickingPower: clickingPower,
    costGoku: costGoku,
    gokus: gokus,
    costVerbalase: costVerbalase,
    verbalases: verbalases,
    costSkyview: costSkyview,
    skyviews: skyviews
  };
  localStorage.setItem("gameSave", JSON.stringify(gameSave));
}

The saveGame() function works perfectly fine, but I still wanted to provide it so you can see what it does for clarification. When I press CTRL + S on my website it still wants to save the page and is not saving the game.

Have a read here: https://stackoverflow.com/questions/93695/best-cross-browser-method-to-capture-ctrls-with-jquery and here for vanilla JS: https://stackoverflow.com/questions/11362106/how-do-i-capture-a-ctrl-s-without-jquery-or-any-other-library — 1x2x3x4x, Jan 21 '21 at 10:24
@Dario I wanted to do that, yes but as I said it doesn't work. — umbreonben, Jan 21 '21 at 10:27
Weird, this needs more troubleshooting - I tried your code and it works fine. What environment are you testing in ? What browser ? Can you give more context around your code snippet ? — turbopasi, Jan 21 '21 at 10:37

Ram Segev · Answer 1 · 2021-01-21T10:44:55.247

You need to stop the propagating, you can either do it with event.stopPropagation(); or with return false;

document.addEventListener("keydown", function(event) {
            if (event.ctrlKey && event.which == 83) { // ctrl + s
                event.preventDefault();
                event.stopPropagation();
                saveGame();

        
            }
        }, false);

Or with return false;

document.addEventListener("keydown", function(event) {
        if (event.ctrlKey && event.which == 83) { // ctrl + s
            event.preventDefault();
            saveGame();
            return false;
    
        }
    }, false);

document.addEventListener("keydown", function(event) {
  if (event.ctrlKey && event.which == 83) { // ctrl + s
    event.preventDefault();
    event.stopPropagation();
    console.log("saveGame()");


  }
}, false);

score 0 · Answer 2 · answered Jan 21 '21 at 10:45

I literally just copied your code , into a plain html file, and it works just great.

<html>
  <head>
  </head>
  <body>

    <script>

      document.addEventListener("keydown", function (event) {

        console.log("keydown");
        console.log(event);

        if (event.ctrlKey && event.which == 83) { // ctrl + s
            event.preventDefault();
            console.log("CTRL + S pressed !")
            saveGame()
        }

      }, true);

      function saveGame() {
        var gameSave = {
            score: 1,
            clickingPower: 2,
            costGoku: 3,
            gokus: 4,
            costVerbalase: 5,
            verbalases: 6,
            costSkyview: 7,
            skyviews: 8
        };
        localStorage.setItem("gameSave", JSON.stringify(gameSave));
        console.log("game saved !")
      }

    </script>

  </body>
</html>

I suggest doing the same on your end and see what happens. If it works here and not in the other project, you need to include more information, like what environment your in, how did you setup your project, what browser you are using, what OS and so on.

The AddEventListener Line doesn't work. What can I do?

2 Answers2