Vanilla JS: Totally disabling a “save” functionality in webpages

问题

Assume I'm a junior Wikipedia user that just want to experiment with changing some wikipedian content with the Wiki text editor in an edit-page, but not saving my changes in any way (not even by mistake), thus seeking a way to prevent any saving functionality in an edit-page, via vanilla JavaScript.

If I go for some edit-page in Hebrew Wikipedia I can save or publish a page by mouse-clinking the Save page button (illustration), which I can remove from DOM with:

document.querySelector("#wpSave").remove();

But let's assume I can still save or publish content by alt+shift+s and I'd like to prevent this possible saving behavior as well; I tried the following code for that:

// ==UserScript==
// @name         wiki
// @match        https://*.wikipedia.org/*
// ==/UserScript==

document.addEventListener("DOMContentLoaded", ()=>{
    document.addEventListener('keypress', function(e) {
        if (e.key == 16 && e.key == 18 && e.key == 83) {
            return false;
        }
    });
});

The code failed (no special error is given in console). Why it failed?

回答1:

The keyCodes all represent modifier keys. The keypress event does not fire with these keys:

    document.addEventListener('keypress', function(e) {
    console.log('keypress worked');
    });

    document.addEventListener('keyup', function(e) {
    console.log('keyup worked');
    });

Also, please note that .keyCode is deprecated. Should use .key

回答2:

There are a number of problems in your question:

event.key isn't the same as event.keyCode, Refer to the documentation.
e.key == 16 && e.key == 18 && e.key == 83 will never be true.
Returning false from an event listener doesn't stop the event from being propagated.

What you are trying to do can be achieved in the following way:

document.addEventListener("keypress", evt => {
  // refer to https://stackoverflow.com/a/2878005/8746648
  if(evt.altKey && evt.key == "S") {
    alert("prevent this message");
    evt.preventDefault();
  }
});

// refer to https://stackoverflow.com/a/35611393/8746648
document.addEventListener("keypress", evt => {
  if(evt.altKey && evt.key == "S") {
    evt.stopPropagation();
  }
}, true);

Notice the true in the second event listener.
Notice that evt.key is compared with an upper case "s".
You can't prevent an event listener from running if it's registered in the capturing phase. (read about the capture and blobbing phases here).

回答3:

If you can to know which method is called after clicking the save button, the way below can be helpful:

My suggested way is pressing f12 and then clicking on the save button to find the save method. Now, after finishing dom loading (in your code), you must replace gained function with an empty function like this:

FOUNDEDSaveFunc = function(){};

If clicking on the save button leads to refresh, you can gain that called action with some apps like fiddler (instead of pressing f12).

Also, document.addEventListener adds new listener to current existing listeneres. Because this, the main function that handles keypress, and your added function, will run both (the original save function still will call in this case).

回答4:

Onclick you could prevent the default action.

document.addEventListener('keypress', function(e) {
    if (event.keyCode == 16 && event.keyCode == 18 && event.keyCode == 83) {
           e.preventDefault();
    }
});

来源：https://stackoverflow.com/questions/52915887/vanilla-js-totally-disabling-a-save-functionality-in-webpages

标签

javascript

events

dom

return

keyboard-shortcuts