element.removeEventListener('mousedown',externalFunction,useCapture);无效

时间:2017-10-28 17:56:53

标签: javascript

我需要先删除事件监听器,然后再动态添加更多需要相同事件监听器的元素。我正在使用外部函数名称(不是匿名函数)并在add和remove中指定相同的useCapture值。

该函数嵌套在另一个函数中。的 <疑似问题是问题

您可以多次点击第一个“添加按钮”来查看问题。第一次单击会再添加一个按钮,第二次单击会再添加两个按钮,第三次单击会再添加四个,等等。每次单击只需添加一个按钮。我想removeEventListener的返回值始终为undefined,所以我只能说重复事件中的删除不起作用。

var app = function() {
	console.log('app');
	
	var setup = function() {
		console.log('setup');
	
		var addButton = function(e) {
			console.log(e);
			var button = e.target;
			var newButton = document.createElement('BUTTON');
			newButton.innerText = 'add another button';
			button.parentNode.appendChild( newButton );
			setup();
		}
	
		var buttons = document.querySelectorAll('button');
		
		for(var i=0; i<buttons.length; i++) {
			var button = buttons[i];
			button.removeEventListener('mousedown', addButton, false);
			button.addEventListener('mousedown', addButton, false);
		}
		
	}
	setup();
}
app();
<div>
	<button>add button</button>
</div>

1 个答案:

答案 0 :(得分:0)

从嵌套中删除addButton函数修复了问题。

此外,在app.addButton内或app.setup内定义app.addButton会导致app.setup每次调用var app = {}; app.addButton = function(e) { console.log(e); var button = e.target; var newButton = document.createElement('BUTTON'); newButton.innerText = 'add another button'; button.parentNode.appendChild( newButton ); app.setup(); } app.setup = function() { console.log('setup'); var buttons = document.querySelectorAll('button'); for(var i=0; i<buttons.length; i++) { var button = buttons[i]; button.removeEventListener('mousedown', app.addButton, false); button.addEventListener('mousedown', app.addButton, false); } } app.init = function() { console.log('app'); app.setup(); } app.init();时都会被覆盖,这会破坏removeEventListener所需的引用。所以这个名字并不重要。它必须是原始功能,而不是精确的副本。

&#13;
&#13;
<div>
  <button>add button</button>
</div>
&#13;
let grades = [5,5,6,7,6,7,9,10,8,6]

let gradesSpread = {
   5:0,
   6:0,
   7:0,
   8:0,
   9:0,
   10:0
}


// This populates spreadGrades object as intended
for( let [index,grade] in grades.entries() ) {
   gradesSpread[grade]++
}
&#13;
&#13;
&#13;