使用contentEditable时，表格将被选中

Question

我试图使用contentEditable使td元素可编辑。 这似乎有效，但出于某种原因，表格和“电池”都是有效的。被选中。

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

＆＃13;

＆＃13;

	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");
		}
	});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的代码有三处小改动：

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

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

3. 我没有收听身体上的模糊事件，而是订阅了活跃的td元素来观察模糊事件。

   *注意：处理完模糊事件后，我没有为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>