第一次點擊后禁用點擊事件

Question

我有一個功能，每次用戶點擊頁面上的圖像時都會計數：

for(var i = 0; i < document.getElementsByClassName("face").length; i++){
    document.getElementsByClassName("face")[i].addEventListener("click", counter)
}

function counter(){
    count ++;
}

我想在第一次點擊后禁用它，這樣它就不會繼續計算同一張圖片的重復點擊次數。 我知道在 HTML 標簽上添加this.onclick=null會起作用，但我想知道是否有辦法在 javascript 文件本身上執行此操作，因此我不需要將 javascript 放入我的 HTML 文件中。

Answer 1

您需要從每個單擊的元素中刪除事件偵聽器：

function counter(){
    count++;
    this.removeEventListener('click', counter);
}

Answer 2

如果您不想刪除該事件（以防您稍后需要再次重新激活它或其他什么），您可以讓count一個布爾值數組，每個按鈕將翻轉其自己索引的值。 這樣沒有重復，您仍然可以輕松獲得所有真實標志的總和。

var count = [];
function counter(i){
    count[i] = true;
}

快速現場示例：

 var count = []; var faces = document.getElementsByClassName("face"); var result = document.getElementById('t'); for(var i = 0; i < faces.length; i++){ handle(i); } function counter(i){ var total = 0; count[i] = true; count.concat([]).reduce(function(p, c){c ? total++ : ''}, 0); result.textContent = total; } function handle(i){ faces[i].addEventListener("click", function(){ counter(i); this.className = 'face clicked'; }) }

 button {width: 50px; height: 50px} button.clicked {opacity: 0.2}

 <button class="face"></button> <button class="face"></button> <button class="face"></button> <button class="face"></button> <p>Count: <span id="t">0</span></p>

Answer 3

有一種更簡潔的方法來處理您所尋求的功能。 我認為您想要的是像@Shomz 認為的那樣點擊的圖像列表。 那是對的嗎？

1) for 循環的長度屬性在循環中的每次迭代中進行評估。 在每次迭代中再次從 DOM 中獲取索引為i的元素很慢。

for(var i = 0; i < document.getElementsByClassName("face").length; i++){
    document.getElementsByClassName("face")[i].addEventListener("click", counter)
}

一個改進是把它改成這樣：

var faces = document.getElementsByClassName("face");
for (var i = 0, var len = faces.length; i < len; i++) {
    faces[i].addEventListener("click", counter)
}

2）但代碼仍然為每個圖像附加一個事件偵聽器。 如果您有很多圖像，這會很慢。 更好的方法是讓點擊事件向上冒泡並在父級捕獲它們。 這稱為事件委托。 這樣您就不需要循環，只需要附加一個事件處理程序。

我存儲圖像的 id，但是您可以從節點中存儲您需要的任何東西，當然這是唯一的（src？）。

var clickedFaces = [];

document.getElementById('ImageContainer').addEventListener("click", onFaceClick);

function onFaceClick(e) {
    if (e.target.className === 'face' && clickedFaces.indexOf(e.target.id) !== -1) {
        clickedFaces.push(e.target.id);
    }
}

如果你想知道點擊了多少張臉：

console.log(clickedFaces.length);