Question

在以下示例中将焦点设置为第一个div并使用CTRL + C复制时，为什么第二个div接收到该事件？

const selectAreas = Array.from(document.getElementsByClassName("select-area"));
selectAreas.forEach(element => element.addEventListener('focus', (event) => {
  const windowSelection = window.getSelection();
  windowSelection.removeAllRanges();
  const range = document.createRange();
  range.selectNode(element);
  windowSelection.addRange(range);
}))

selectAreas.forEach(element => element.addEventListener('copy', (event) => {
  console.log("Copy! Area: " + element.id);
}))

<div class="select-area" id="area1" style="user-select: none" tabindex="0">
  I am text
</div>

<div class="select-area" id="area2" tabindex="0">
  I am text
</div>

Answer 1

这是因为第一个元素被设置为user-select: none。从文档中：

该元素及其子元素的文本不可选择。注意选择对象可以包含这些元素。

但是，此元素已明确添加到Selection中，因此它应接收copy事件。浏览器看到此元素不可选择，便找到了最近的可选元素并将事件发送到该位置。

很明显，此人为制作示例的解决方法是删除user-select: none。

Chrome：所选元素未收到“复制”事件

1 个答案: