Question

我点击<a>，它会显示其ID，但如果我再次点击alert()，则会显示alert()两次，如果我再次点击它，则会显示<a id="5" class="accRoom" onclick="dynamicLink()">5</a> <a id="6" class="accRoom" onclick="dynamicLink()">6</a> 3次就是这样。我怎样才能防止重复？

dynamicLink()

function dynamicLink() { var x = document.getElementsByClassName("accRoom"); for (var i = 0; i < x.length; i++) { x[i].addEventListener("click", function() { alert(this.id); }, false); } }在.js文件夹中的功能

{{1}}

Answer 1

之所以发生这种情况，是因为每次点击你的脚本都会将点击事件附加到课程accRoom的所有元素，你只需要点击一次点击：

var x = document.getElementsByClassName("accRoom");
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {
        alert(this.id);
    }, false);
}

然后html应该是：

<a id="5" class="accRoom">5</a>
<a id="6" class="accRoom">6</a>

希望能帮到你。

＆＃13;

var x = document.getElementsByClassName("accRoom");

function eventFunction() {
  alert(this.id);
}
for (var i = 0; i < x.length; i++) {
  x[i].removeEventListener('click',eventFunction,false);
  x[i].addEventListener("click",eventFunction, false);
}

＆＃13;

<a id="5" class="accRoom">5</a>
<a id="6" class="accRoom">6</a>

＆＃13;

或者您可以将点击的元素作为对象this发送到onclick函数：

＆＃13;

//This link was added dynamically
document.body.innerHTML += '<a id="7" class="accRoom" onclick="dynamicLink(this)">7</a>';

function dynamicLink(_this) {
  alert(_this.id);
}

＆＃13;

<a id="5" class="accRoom" onclick="dynamicLink(this)">5</a>
<a id="6" class="accRoom" onclick="dynamicLink(this)">6</a>

＆＃13;

Answer 2

函数dynamicLink将一个匿名函数（发出警报）附加到CSS类“accRoom”的每个元素的click事件。

问题是它还附加到click事件。因此，每次单击它都会将另一个函数附加到click事件，所以......

您可以通过删除“accRoom”链接上的onclick属性并在加载dom后调用dynamicLink来避免此行为。

HTML：

<a id="5" class="accRoom">5</a>
<a id="6" class="accRoom">6</a>

JS：

var x = document.getElementsByClassName("accRoom");
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("click", function() {
        alert(this.id);
    }, false);
}
document.addEventListener("DOMContentLoaded", addDynamicLinks)

希望有所帮助

Answer 3

不要使用匿名功能

function awesomeAlert(){
   alert(this.id);
}

function dynamicLink() {
    var x = document.getElementsByClassName("accRoom");
    for (var i = 0; i < x.length; i++) {
        x[i].removeEventListener("click", awesomeAlert);
        x[i].addEventListener("click", awesomeAlert, false);
    }
}

也许你不关心但是有很多更好的方法来设置听众，在上面的代码中还有改进的空间，这是另一个故事。

玩得开心

addEventListener重复自己

3 个答案: