Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вопрос про dblclick и его стандартный внутренний обработчик (https://javascript.ru/forum/misc/72575-vopros-pro-dblclick-i-ego-standartnyjj-vnutrennijj-obrabotchik.html)

BNB 09.02.2018 16:33

Вопрос про dblclick и его стандартный внутренний обработчик
 
В body есть код:

<ul id="list">
    <li>Elem1</li>
    <li>Elem2</li>
 </ul>


В теге скрипт есть:
let ul = document.querySelector('#list');
    let lis = ul.getElementsByTagName("li");
    
    for (let i = 0; i < lis.length; i++) {
      let li = lis[i];
      
      li.addEventListener("dblclick", dblclickHandler);
    }
    
    function dblclickHandler(event) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }


Как я понимаю, для события dblclick в документе браузер имеет свой внутренний стандартный обработчик на выделение текста при возникновении данного события. В моем коде я хочу отменить это выделение и для этого в своём обработчике события dblclick отменяю действие по умолчанию с помощью event.preventDefault(), прерываю все обработчики события dblclick для данного элемента и запрещаю всплытие с помощью event.stopImmediatePropagation(). Собственно вопрос, почему браузер все равно выделяет текст? Если поставить обработчик с командой event.preventDefault() на событие mousedown, то все будет работать корректно, только понять не могу почему. Может я чего-то не понимаю в технологии работы событий и их обработчиков? Заранее спасибо за ответ.

P.S. Тестировал в Chrome

ksa 09.02.2018 16:50

Цитата:

Сообщение от BNB
Может я чего-то не понимаю в технологии работы событий и их обработчиков?

Ты смешиваешь события, которые может обрабатывать JS и действия браузера.

Завтра они еще что-то придумают и нашим программка пипец. :)

BNB 09.02.2018 17:14

Хм, ну в учебнике в теме "действия браузера по умолчанию" сказано, что двойной клик на тексте инициирует его выделение и такое действие является действием браузера по умолчанию, затем, сказано, что отменять такие действия по умолчанию можно с помощью метода у объекта события, то есть event.preventDefault(). Получается, я должен создать обработчик для dblclick и там прописать метод event.preventDefault(), чтобы действие по умолчанию (в данном случае выделение текста) отменить. В чем тогда я ошибаюсь и почему тогда данный обработчик, но на событии mousedown работает? Можно подробнее объяснить?) Спасибо.

Dilettante_Pro 09.02.2018 17:32

<ul  onmousedown="return false" onselectstart="return false">
    <li>Elem1</li>
    <li>Elem2</li>
 </ul>

Источник - Отмена выделения

BNB 09.02.2018 17:36

Мне не нужна тема про отмену выделения, я её уже читал и про preventDefault() в dblclick ничего не нашел. Все способы в этой теме описаны через другие события, а я хочу понять, почему отмена в обработчике события dblclick не работает)

BNB 09.02.2018 17:44

Пока только нашел зацепку на способе 2 из темы отмены выделений. Там говорится, что с помощью метода clearSelection() в обработчике события dblclick мы снимает выделение пост-фактум, то есть выделение сначала появляется и потом сразу исчезает. Получается, что действия браузера на событие dblclick срабатывают раньше обработчиков, которые пишем мы или действие браузера на выделение текста возникает до события dblclick? Но, в то же время, в теме "действия браузера по умолчанию" говориться, что данное действие браузера возникает при возникновении события dblclick... Вообщем, пока у меня каша в голове по этому поводу)

Dilettante_Pro 09.02.2018 17:55

BNB,
dblclick - комплексное событие

Вот его составляющие:
mousedown
mouseup
click
mousedown
mouseup
click
dblclick

Судя по всему, браузер делает выделение при двух подряд mousedown,
И preventDefault() на dblclick делать уже поздно.
<ul id="list">
    <li>Elem1</li>
    <li>Elem2</li>
 </ul>
<script>
let ul = document.querySelector('#list');
    let lis = ul.getElementsByTagName("li");
    
    for (let i = 0; i < lis.length; i++) {
      let li = lis[i];
      
      li.addEventListener("dblclick", dblclickHandler);
    }
    
    function dblclickHandler(event) {
      alert("dblclick");
      event.preventDefault();
      event.stopImmediatePropagation();
    }
</script>

BNB 09.02.2018 17:57

Понял, спасибо. Буду надеяться, что так оно и есть)


Часовой пояс GMT +3, время: 11:25.