Chrome: выбранный элемент не получает событие «копировать» - PullRequest
Новая
       14

Chrome: выбранный элемент не получает событие «копировать»

0 голосов
/ 26 апреля 2019

При установке фокуса на первый 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>

1 Ответ

0 голосов
/ 26 апреля 2019

Это происходит потому, что первый элемент установлен user-select: none. Из документации:

Текст элемента и его подэлементов недоступен для выбора. Заметка что объект Selection может содержать эти элементы.

Однако этот элемент был явно добавлен в Выбор, поэтому он должен получить событие copy. Браузер, увидев, что этот элемент недоступен для выбора, находит ближайший элемент, который можно выбрать, и отправляет событие туда.

Очевидно, исправление для этого надуманного примера - удалить user-select: none.

...