我如何使用图书标记暂时禁用我网站中的事件处理程序？

Question

我制作了一个简单的按钮点击器网站，每次您单击该按钮时，它都会添加一个计数器。这是 url:

https://joeceb.w3spaces.com/button-clicker.html

代码非常基础，看起来像这样

/* original code */

let clicks = 0
                
function Click() {
  document.getElementById("btn").innerHTML = `${clicks += 1} clicks`
  if (clicks >= 100) {          // acheivement at 100 clicks
      document.getElementById("btn").innerHTML = `${clicks} &#x2605 clicks`
  }
}


/* generates button */

function addButton() {
    document.body.style.textAlign = "center";
    var btn = document.createElement("BUTTON");
    btn.innerHTML = `0 clicks`;
    var att = document.createAttribute("id");
    att.value = "btn";                           
    btn.setAttributeNode(att);
    btn.style.padding = "12pt";
    btn.addEventListener("click", Click);
    document.body.appendChild(btn);
}
addButton()

点击次数达到 100 次后，您的电话号码旁边将显示星 ★。在原来的情况下，它会在您达到 10 000 ★ 点击次数

后解锁

问题是如果你点击按钮一次然后按住回车键，它会快速持续增加，所以我使用jquery来防止这种情况发生。

这是禁用输入的更改脚本：

/* i stole this answer from another question */
function loadJQuery() {                   // i'm using jquery ver 3.6 btw
import('https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js').then(()=>{
$(document).keydown( function(event) {
    if (event.which == 13) {
        event.preventDefault();
    }
});
})
}
loadJQuery();



/* original code */

    let clicks = 0
                    
    function Click() {
      document.getElementById("btn").innerHTML = `${clicks += 1} clicks`
      if (clicks >= 100) {          // acheivement at 100 clicks
          document.getElementById("btn").innerHTML = `${clicks} &#x2605 clicks`
      }
    }

    
    /* generates button */

    function addButton() {
        document.body.style.textAlign = "center";
        var btn = document.createElement("BUTTON");
        btn.innerHTML = `0 clicks`;
        var att = document.createAttribute("id");
        att.value = "btn";                           
        btn.setAttributeNode(att);
        btn.style.padding = "12pt";
        btn.addEventListener("click", Click);
        document.body.appendChild(btn);
    }addButton();

现在要达到 100 次点击有点困难。

但我的问题是，如果我需要测试某些东西，你怎么能使用像 bookmarklet 这样的外部脚本来绕过它。

我出于某种原因禁用了回车键。但如果我必须重新启用它，我不想每次都编辑源代码，而你宁愿有一些我可以单击以暂时停用它的东西。我也不能使用任何服务器端脚本或调试控制台，因为它被管理员禁用了。

您可能需要使用网站的原始来源，所以这里是

<script src="/content/jquery-3.6.0.min.js"></script>
<script>
$(document).keypress( function(event){
  if (event.which == '13') {
    event.preventDefault();
  }
});
</script>

编辑：我曾经能够做到这一点 (() => {my-variable = 9999; myFunction();})(); 直到我通过移动同一脚本元素中的所有代码和大括号{}内更改变量范围来修复它

Answer 1

为了防止 enter 漏洞利用，您需要做的就是防止将按键事件发送到按钮 - 而且您不需要像这样的庞大库jQuery 对于一些微不足道的事情：

document.addEventListener('keydown', (e) => {
  if (e.target.matches('#btn') && e.key === 'Enter') e.preventDefault();
});

document.addEventListener('keydown', (e) => {
  if (e.target.matches('#btn') && e.key === 'Enter') e.preventDefault();
});

/* original code */

let clicks = 0

function Click() {
  document.getElementById("btn").innerHTML = `${clicks += 1} clicks`
  if (clicks >= 100) { // achievement at 100 clicks
    document.getElementById("btn").innerHTML = `${clicks} &#x2605 clicks`
  }
}

/* generates button */

function addButton() {
  document.body.style.textAlign = "center";
  var btn = document.createElement("BUTTON");
  btn.innerHTML = `0 clicks`;
  var att = document.createAttribute("id");
  att.value = "btn";
  btn.setAttributeNode(att);
  btn.style.padding = "12pt";
  btn.addEventListener("click", Click);
  document.body.appendChild(btn);
}
addButton()

使用 e.target.matches 检查输入是否进入 #btn - 如果是，则按键不会执行任何操作。如果 enter 是其他任何东西（比如 <textarea>），它不会受到干扰。

不过，如果您想使用脚本绕过阻止输入，您需要做的就是在按钮上 .click()。

for (let i = 0; i < 100; i++) {
  document.querySelector('#btn').click();
}

document.addEventListener('keydown', (e) => {
  if (e.target.matches('#btn')) e.preventDefault();
});

/* original code */

let clicks = 0

function Click() {
  document.getElementById("btn").innerHTML = `${clicks += 1} clicks`
  if (clicks >= 100) { // acheivement at 100 clicks
    document.getElementById("btn").innerHTML = `${clicks} &#x2605 clicks`
  }
}


/* generates button */

function addButton() {
  document.body.style.textAlign = "center";
  var btn = document.createElement("BUTTON");
  btn.innerHTML = `0 clicks`;
  var att = document.createAttribute("id");
  att.value = "btn";
  btn.setAttributeNode(att);
  btn.style.padding = "12pt";
  btn.addEventListener("click", Click);
  document.body.appendChild(btn);
}
addButton()

// userscript or bookmarklet code:
for (let i = 0; i < 100; i++) {
  document.querySelector('#btn').click();
}

我如何使用图书标记暂时禁用我网站中的事件处理程序？

how can i use a book marklet to temporarily disable an event handler in my website?

html

javascript

dom

bookmarklet

jquery-events