removeEventListener-返回False不停止侦听器

Question

我正在监听两个变量height和weight的变化。当两者都计算为true时，我期望返回值false来停止侦听器。当我在代码中的其他地方移动范围滑块时，它会不断追加<script type="text/javascript" src="js/modelers/average_aboveaverage.js"></script>。

function makeModeler() {
document.addEventListener("change", function(){
var height = document.getElementById('height-class').value; 
var weight = document.getElementById('weight-class').value;
shape = height + "_" + weight;

if (!(height && weight)) { 
return true;
} else {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/modelers/"+shape+".js";
document.body.appendChild(script);
return false;        
}
});  

}
makeModeler();
document.addEventListener("change", makeModeler);
document.removeEventListener("change", makeModeler, false);

Answer 1

您在每次更改中都会无限添加事件，因为您正在执行以下操作：

document.addEventListener("change", makeModeler);

而makeModeler函数也首先添加了onChange事件

Answer 2

我不得不找到一种非常规的方法来停止eventListener。eventTarget对我不起作用，因为"；动态的"；我在网站上呈现数据的方式。需要注意的是，addEventListener应该附带一个选项来阻止它无限运行。看起来很明显。

我将监听器添加到do/while:

var height = document.getElementById('height-class').value; 
var weight = document.getElementById('weight-class').value;

do {
document.addEventListener("change", function(){

var height = document.getElementById('height-class').value; 
var weight = document.getElementById('weight-class').value;
shape = height + "_" + weight;

if (!(height && weight)) { 
return true;      
} else {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "js/modelers/"+shape+".js";
document.body.appendChild(script);
document.getElementById('weight-class').id = "weight-class2";

}

});  
}
while (height && weight);

我更改了元素的id，以阻止while条件求值为true。更有经验的程序员可能知道如何更好地停止这种情况。