Как получить целевой элемент для события dom 'selectionchange'

Я оказался в ситуации, когда я хочу получить целевой элемент, который вызвал событие selectionChange dom.

Но, судя по https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange кажется, что элемент в e.target всегда является объектом документа в обычном случае (без ввода, без текстового поля).

Значит ли это, что мне придется вручную вызывать window.getSelection, определять текущее местоположение курсора и таким образом находить узел dom?

Кто-нибудь знает короткий путь? или какой-нибудь рабочий пример был бы хорош.


javascript html dom-events
person Zhen Liu    schedule 14.10.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Если ваш элемент может стать активным элементом, используйте document.activeElement, чтобы получить элемент, внутри которого мы выбираем. Это будет работать с текстовыми областями, входными данными и элементами, для которых установлено значение tabindex.

// NOTE: activeElement can only be found on selectable elements!

document.addEventListener('selectionchange',function(){
	document.getElementById('currentTag').innerHTML = document.activeElement.tagName;
});
#currentTag{
  font-weight:bold;
}
<textarea>This is sample text you can replace and move your cursor within. Whee!</textarea>

<br><input type="text" placeholder="Input">

<p tabindex="0">P tag text is the best tag text. <span color="blue">Unless you have a span.</span></p>

<ol tabindex="0">
  <li tabindex="0">Item 1</li>
  <li tabindex="0">Item 2</li>
</ol>

<p id="currentTag"></p>

person Josh Powlison    schedule 15.06.2019
comment
Эй, ммм.. спасибо за ответ на вопрос, который я задал 3 года назад XD Я должен был выбрать ответ.. - person Zhen Liu; 17.06.2019
comment
Я подумал, что для вас уже слишком поздно, но я искал то же самое и нашел этот вопрос. Я хотел ответить за других. :) Спасибо, что приняли мой ответ. - person Josh Powlison; 18.06.2019

arrow_upward
0
arrow_downward

Вы можете использовать document.selection, чтобы получить то, что выбрано в данный момент.

Пример взят из http://help.dottoro.com/ljixpxji.php.

<head>
    <script type="text/javascript">
        document.onselectionchange = OnChange;
        function OnChange () {
            var range = document.selection.createRange ();
            if (range.text.length == 0) {
                alert ("The current selection is empty");
            }
            else {
                alert ("The contents of the current selection are\n" + range.text);
            }
        }
    </script>
</head>
<body>
    Select this text on this page!
</body>

--РЕДАКТИРОВАТЬ--

Как указал @user1017674, этот код не работает в Chrome, после небольшого исследования я обнаружил, что document.selection следует использовать только в IE ‹ 9. Кажется, что window.getSelection() по-прежнему будет лучшим способом его получить.

Ссылка Поддерживает ли chrome document.selection?

person blitz1616    schedule 14.10.2016
comment
Я не знаю, пробовали ли вы этот код на chrome.F12 и копировать и вставлять в консоль. document.selection продолжает давать мне неопределенность. Есть ли способ получить выбранный узел dom? - person Zhen Liu; 14.10.2016