我如何使用書簽來臨時禁用我網站中的事件處理程式？

我做了一個簡單的按鈕點擊器網站，每次你點擊按鈕時，它都會添加到一個計數器。這是網址：

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次點擊有點困難。

but my question is how could you use an external script like a bookmarklet to bypass it incase i need to test something.

i disabled the enter key for a reason. but if i have to re-enable it, I dont want to edit the scource every time and yould rather have something that i could click to temporarily deactivate it. also i cant use any server-side scripts or the debug console as its disabled by the administrator.

you may need to use the websites original source so here it is

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

Edit: i used to be able to do this (() => {my-variable = 9999; myFunction();})(); until i fixed it by moving all the code in the same script element and inside braces{} changing the variable scope

uj5u.com熱心網友回復：

為了防止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) { // 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()

使用e.target.matches檢查輸入是否會進入#btn- 如果是，則按鍵不會執行任何操作。如果輸入要進行其他任何操作（例如 a <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();
}

標籤：javascript html dom jquery-events bookmarklet

上一篇：在Android上抓取動態生成的頁面

下一篇：右鍵單擊任何選單項時如何獲取MenuItem名稱？