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事件的执行错误，出现文章开头的报错。

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

blur事件与click事件冲突的解决办法相关推荐

不同dom的blur事件和click事件发生冲突
直接上测试代码 <!DOCTYPE html> <html lang="en"> <head><title>不同dom的blur事件 ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
移动端touch事件和click事件的区别
移动端touch事件和click事件的区别 1.touch事件以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动 ...
ios 静态库冲突的解决办法
参考:http://www.cnblogs.com/machao/p/5288460.html ios 静态库冲突的解决办法最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的 ...
git rebase 的常见冲突及解决办法
1. git cherry-pick与git rebase 进行两个独立分支的代码合并时有两个比较常用的命令,分别是git cherry-pick <commit-id>和git reba ...
office2016和Visio2016安装冲突的解决办法（后附安装包链接）
office2016和Visio2016安装冲突的解决办法不管是先安装好office2016再安装Visio2016,还是先安装Visio2016再安装office2016,这两种方法在安装后者的时 ...
Linux(Ubuntu)下WiFi网卡(intel ax201)驱动与Nvidia显卡驱动冲突的解决办法
Linux(Ubuntu)下WiFi网卡(intel ax201)驱动与Nvidia显卡驱动冲突的解决办法环境: 系统 Ubuntu 22.04 LTS 网卡ax201(微星b660m迫击炮wifi ...
QQ2005Beta3与输入法组件冲突的解决办法(转)
QQ2005Beta3与输入法组件冲突的解决办法(转) 关于输入法与QQ2005beta3冲突的问题,腾讯官方已经给出了解决建议,请看―― 尊敬的QQ用户: 大家好!首先感谢大家选用了QQ的最新版:Q ...
IP地址与网络上的其他系统有冲突的解决办法：
IP地址与网络上的其他系统有冲突的解决办法: 如果是用局域网,那么是局域网中有其他电脑的IP地址与你的电脑的IP地址相同, 如果是单机直接上网,那么需要检查自己所使用的设备中哪一个设备是冲突的原因,例 ...

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

问题

原因

blur事件与click事件冲突的解决办法相关推荐

最新文章

热门文章