javascript - 使用 contentEditable 时表格被选中

Question

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

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

	document.querySelector('body').addEventListener('click', function(event) {
		if (event.target.tagName.toLowerCase() === 'td') {
			this.contentEditable = true;
			this.focus();
		}
	});
	
	document.querySelector('body').addEventListener('blur', function(event) {
		if (event.target.tagName.toLowerCase() === 'td') {
			this.removeAttribute("contentEditable");
		}
	});

td[contentEditable] {
    background:black;
    color:white;
}

<table class="table" id="tableCompleted">
    <thead>
        <tr>
            <th>Name</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
        <tr>
            <td>Jesse</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>David</td>
            <td>No</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
    </tbody>
</table>

Answer 1

对您的代码进行了三处小改动:

1. CSS td[contentEditable] 适用于 td，即使 contentEditable 设置为 false。所以应该是 td[contentEditable=true] 以确保当 contentEditable 属性设置为 false 时不应用样式。

2. 在 click 处理程序中，我没有使用 this.contentEditable，而是使用了 event.target。

3. 我订阅事件的 td 元素来观察模糊事件，而不是监听 body 上的模糊事件。

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

function handleBlur(event) {
  event.target.contentEditable = false;
}

document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'td') {
    event.target.contentEditable = true;
    event.target.focus();

    event.target.addEventListener("blur", handleBlur);
  }
});

td[contentEditable=true] {
  background: black;
  color: white;
}

td {
  background: white;
  color: black;
}

<table class="table" id="tableCompleted">
  <thead>
    <tr>
      <th>Name</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>No</td>
      <td>No</td>
    </tr>
    <tr>
      <td>Jesse</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>David</td>
      <td>No</td>
      <td>Yes</td>
      <td>No</td>
      <td>No</td>
    </tr>
  </tbody>
</table>