Vanilla JS：完全禁用网页中的“保存”功能

Question

假设我是一名初级 Wikipedia 用户，只想尝试在编辑页面中使用 Wiki 文本编辑器更改一些 Wikipedian 内容，但不以任何方式保存我的更改（即使是错误的），因此寻求防止任何在编辑页面中保存功能的方法，通过 vanilla JavaScript。

如果我在希伯来语维基百科中查找 edit-page，我可以通过单击保存页面按钮 (illustration) 来保存或发布页面，我可以通过以下方式从 DOM 中删除它：

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

---

但假设我仍然可以通过 alt+shift+s 保存或发布内容，并且我也想防止这种可能的保存行为；我为此尝试了以下代码：

// ==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;
        }
    });
});

代码失败（控制台中没有给出特殊错误）。为什么失败了？

Answer 1

Onclick 可以阻止默认操作。

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

Answer 2

keyCodes 都代表修饰键。 keypress 事件不会使用这些键触发：

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

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

另外，请注意 .keyCode 已弃用。应该使用.key

Answer 3

如果您可以知道点击保存按钮后调用了哪个方法，下面的方法可能会有所帮助：

我建议的方法是按f12然后点击保存按钮找到保存方法。现在，在完成dom 加载（在您的代码中）之后，您必须将获取的函数替换为一个空函数，如下所示：

FOUNDEDSaveFunc = function(){};

如果单击保存按钮导致刷新，您可以使用 fiddler 等某些应用程序获得该调用操作（而不是按 f12）。

---

另外，document.addEventListener 将新的侦听器添加到当前现有的侦听器中。因为这样，处理按键的主函数和您添加的函数都将运行（在这种情况下，原始保存函数仍将调用）。

Answer 4

你的问题有很多问题：

• event.key 与event.keyCode 不同，请参考documentation。
• e.key == 16 && e.key == 18 && e.key == 83 永远不会是真的。
• 从事件侦听器返回 false 不会阻止事件传播。

您尝试做的事情可以通过以下方式实现：

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

1. 注意第二个事件监听器中的true。
2. 请注意，evt.key 与大写“s”进行比较。
3. 如果事件侦听器已在捕获阶段注册，则无法阻止它运行。 （阅读关于捕获和 blobbing 阶段的信息 here）。