Question

我有一个HTML选择，旨在影响我的Javascript点击事件。虽然我的代码在技术上有效，但我不确定为什么我的click事件在相应的时间运行，我更改了我的选择框值。

假设我将选项选择更改为非--的任何内容。如果我然后单击标有donate的文本，则在我的控制台日志中有一个文本Michael。现在，如果我将选项值切换到另一个值为'n'的值 t --，然后再次点击donate，然后我的控制台会运行我的点击事件2次。如果我再次重复此过程，我的点击事件将运行3次。

我的例子似乎有些荒谬，但希望这一点很明确。

var changing = document.getElementById("changing");
var donate = document.getElementsByClassName("donate");
changing.addEventListener('change', function() {
  if (this.value !== "--") {
    for (i = 0; i < donate.length; i++) {
      donate[i].addEventListener('click', function() {
        console.log("Michael");
      });
    }
  }
});

<select id="changing">
	<option value="--">--</option>
	<option value="vegetarian">Vegetarian</option>
	<option value="technical">Technical</option>
	<option value="shoes">Shoes</option>
</select>
<p class="donate">Donate</p>
<p class="donate">Donate</p>
<p class="donate">Donate</p>

要澄清一下，如果我选择更改一次选项，然后点击任意donate文字，我的控制台就会添加文字Michael一次。如果我再次更改它，它会将其乘以2，从而导致3个Michael的节目。再次更改，它会增加3，导致6次控制台记录Michael。

这向我表明，每当我点击donate文字时，我的功能就会运行很多次。我如何重新格式化我的功能只在每个选项更改后运行一次？或者是否存在一些我完全缺失的基本原因？

Answer 1

这更接近你想要完成的事情吗？

var changing = document.getElementById("changing");
var donate = document.getElementsByClassName("donate");
var flag = false;

function log() {
    console.log("Michael");
}

changing.addEventListener('change', function() {
  if (this.value !== "--" && !flag) {
    flag = true;
    for (i = 0; i < donate.length; i++) {
      donate[i].addEventListener('click', log );
    }
  }
  else if(this.value == "--") { 
    flag = false;
    console.log("+++")
    for (i = 0; i < donate.length; i++) {
      donate[i].removeEventListener('click', log );
    }
  }
});

<select id="changing">
    <option value="--">--</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="technical">Technical</option>
    <option value="shoes">Shoes</option>
</select>
<p class="donate">Donate</p>
<p class="donate">Donate</p>
<p class="donate">Donate</p>

注意，事件侦听器只需附加一次。所以，请考虑代码是实际试图完成的内容。

Answer 2

如果选择值为click，则每次触发addEventListener侦听器时，每次呼叫change时，您都会绑定一个新的==侦听器。

如果您希望Michael仅在选择值为==时打印一次，则绑定所有click个侦听器，并检查其中的值。

for (let i = 0; i < donate.length; i++) {
  donate[i].addEventListener("click", function() {
    if (changing.value !== "--") {
      console.log("Michael");
    }
  });
}

Javascript条件点击事件多次运行

2 个答案: