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循环的length属性。

在每次迭代时使用索引i从DOM中再次获取元素

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）但是代码仍然为每个图像附加一个事件监听器。如果您有许多图像，这很慢。更好的方法是让点击事件向上冒泡并在父级别捕获它们。这称为event delegation。这样您就不需要循环，只需要连接一个事件处理程序。

我存储了图像的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);

即使首次点击

3 个答案: