getSelection для изображения

Question

Подскажите, как с помощью range в getSelection по щелчку на изображение или определенный div - выделить его целиком ?

p.s. Этакий аналог: Нажали ЛКМ и тянем выделение, пока не выделится весь элемент

Answer 1

Range + Selection , получилось так:

document.addEventListener("click", function(e) {
  let el = e.target.closest(".js-select");
  if (el) select(el);
});

function select(node) {
  let range = document.createRange();  
  range.selectNode(node);

  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

<div class="js-select">Тест <span>тест</span> тест</div>
<hr>
<div class="js-select"><img src="https://i.gyazo.com/516c42ce8aef912a2064165907c2bb36.png" width="150"></div>

(В зависимости от разметки) можно зацепиться за что-то другое, и обойтись без дополнительных классов:

document.querySelector("#box").addEventListener("click", function(e) {
  if (e.target.tagName == "IMG") select(e.target);
});

function select(node) {
  let range = document.createRange();  
  range.selectNode(node);

  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

img { width: 100px }

<div id="box">
  <img src="https://i.gyazo.com/516c42ce8aef912a2064165907c2bb36.png">
  <img src="https://i.gyazo.com/516c42ce8aef912a2064165907c2bb36.png">
  <img src="https://i.gyazo.com/516c42ce8aef912a2064165907c2bb36.png">
</div>

БЛОГ НА HUSL

getSelection для изображения

Ответы (1 шт):