2020-11-05 HTML中From表单双击td表格切换成编译模式

前言

  该功能的关键点就是用一个<td><input /></td> 去替换原来的<td>xxxx</td>

先上代码

这里有两个关键点，一个是event对象，这个后面在解释为什么要这个参数，第二个就是一个防止window默认双击事件选择文本。直接复制粘贴就好。

献丑了

第一个红框问题，明明我已经在绑定事件的时候通过类选择器选择了只给带有".edit_able"对象绑定，为什么在这里还要进行一次判断呢？
这是因为还有一个功能通过checkbox事件把选中的表单行删除className（这里就不显示代码了，很简单的），不能进行编译操作。但是我发现如果不作这个判断，当先执行checkbox事件确实可以不编译，但是如果先触发了双击编译事件之后，checkbox事件删除了类名还是无效，通过开发者工具发现它已经给该元素绑定了双击事件，就是不管你有没有类名我都继续走了，提前绑定好了。所以我在方法内部在判断一次。可能有更好的办法，欢迎骚扰

2020-11-21 找到造成上述原因

JQ给dom元素绑定事件，为了兼容ie后绑定的先执行，在dom元素中添加了一个类似EventCache对象，对象里面是每一个数组，样式像"click":[fn1,fn2]这种。在促发事件的时候，按顺序遍历数组获取fn对象执行。所以当我先点击双击事件的时候，已经给该dom元素添加了EventCache.“dblclick”:[fn1],所以不管你有没有className都可以促发。理应用用off解绑是可以的，但是一开始我试过不行，可能写错了。

第二个：冒泡事件后面讲

第三个：百度说方法已经过时了，我也没找到好的替换方法，同样欢迎骚扰

冒泡事件的关键在这里，替换回来的Td同样也绑定了dblclick事件这会导致了从第二次开始，触发双击编译事件的时候会因为事件冒泡一直无限循环，我是通过为什么第二次开始我的input按钮没办法focus和select，debug一下发现这个问题。这也是我想写这篇文章的原因，因为百度也没找到解决办法，希望能帮到苦逼的后端程序员在写开发前端的你