blur事件与click事件冲突的解决办法

问题

当对节点同时添加 blur事件 以及 click事件，触发 click事件 的时候程序报出这样的一个错误（Chrome浏览器）：

Uncaught NotFoundError: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is no longer a child of this node. Perhaps it was moved in a ‘blur’ event handler?
Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

原因

这是因为 blur事件 比 click事件 先触发，而javascript为单线程，同一时间只能执行处理一个事件，所以当 blur处理程序后，会有可能导致其后续 click事件 的执行出现问题。

例如：

input.addEventListener('blur', callBack, false);

function callBack(e){
	let t = e.target.parentNode.parentNode;
	t.innerHTML = e.target.placeholder;
}

document.getElementById("confirm").addEventListener('click', function(e){
    	if (isNum(input.value)){
			// input.removeEventListener('blur', callBack, false); 没有这一句的话
			t.innerHTML = input.value + `<span class="edit-icon">
						  						<img src="img/edit.png" alt="">
									  	</span>`;
			modifySourceData(t);						  	
		}
    });

本质上，当从DOM树中删除节点时，它也会触发一个blur事件（focusout也在事件之前）。若你的 blur事件 中对DOM树进行了操作，就会导致 click事件 的执行错误，出现文章开头的报错。

解决办法是： 在你进行操作之前，删除附加的事件监听器。