Javascript 使用contentEditable时，表格变为选中状态

我正在尝试使用contentEditable使td元素可编辑。 这似乎可行，但由于某种原因，表和“单元格”都被选中

我不知道如何防止这种行为。 这就是我目前得到的

document.querySelector（'body'）。addEventListener（'click'，函数（事件）{
if（event.target.tagName.toLowerCase（）='td'）{
this.contentEditable=true；
这是focus（）；
}
});
document.querySelector（'body'）。addEventListener（'blur'，函数（事件）{
if（event.target.tagName.toLowerCase（）='td'）{
此.removeAttribute（“内容可编辑”）；
}
});
td[内容可编辑]{
背景：黑色；
颜色：白色；
}

名称
A.
B
C
D
约翰
对
对
不
不
杰西
对
对
对
对
大卫
不
对
不
不
您的代码有三个小改动：

CSS
td[contentEditable]
适用于
td
，即使
contentEditable
设置为false。因此，它应该是
td[contentEditable=true]
，以确保在
contentEditable
属性设置为false时不应用样式

在
单击处理程序中，我使用的不是
这个.contentEditable
，而是
事件.target

我订阅活动的
td
元素来观察模糊事件，而不是收听身体上的模糊事件

*注意：在处理模糊事件后，我没有添加
removeEventListener
的代码，但您应该这样做


功能把手（事件）{
event.target.contentEditable=false；
}
document.querySelector（'body'）。addEventListener（'click'，函数（事件）{
if（event.target.tagName.toLowerCase（）='td'）{
event.target.contentEditable=true；
event.target.focus（）；
事件.target.addEventListener（“模糊”，把手模糊）；
}
});
td[contentEditable=true]{
背景：黑色；
颜色：白色；
}
运输署{
背景：白色；
颜色：黑色；
}

名称
A.
B
C
D
约翰
对
对
不
不
杰西
对
对
对
对
大卫
不
对
不
不