onMouseEnter и тачпад

157
25 июня 2019, 19:10

Дело в том что на блоке стоит обработчик onMouseEnter

 <div class="block" onMouseEnter={open}>
    <div class="list">
    </div>
 </div>

Логичное поведение, это то что когда мышь заходит на block, то срабатывает функция open. НО когда указатель мыши находится внутри и я прикладываю ВТОРОЙ палец на тачпаде ноутбука, то генерируется второе событие, и функция open отрабатывает снова(прямо внутри блока), что очень не нужно.

Как можно от этого избавится.

Исключать события с помощью event.target не получится, т.к в реальности внутри блока очень много других блоков.

Как можно отменить генерацию следующих событий, для других пальцев?) Спасибо

Answer 1

Событие onMouseEnter происходит, когда пользователь помещает курсор мыши в область элемента, данное событие очень спцэфично в силу своей особенности заточенности под IE, я рекомендую вам использовать другое событие.

Используйте событие onMouseOver - возникает однократно, когда пользователь наводит курсор мыши на элемент. Именно это событие является кроссбраузерным решением. Если необходимо, чтобы действие происходило при уходе курсора с элемента, используйте событие onMouseOut. Также полезно знать, что при перемещении курсора в пределах данного элемента многократно происходит событие onMouseMove.

Вот такой код должен работать более предсказуемо:

<div class="block" onMouseOver={open}>
  <div class="list">
  </div>
</div>

Также рекомендую проверить настройку тачпада на вашем ноутбуке, чтобы исключить проблему в настройках конкретного компьютера.

READ ALSO
Как добавить в масив только уникальные обьекты ?
javascript

Как добавить в масив только уникальные обьекты ?

У меня есть масив с обьектами:

 148
Не срабатывает событие изменения sessinStorage
javascript

Не срабатывает событие изменения sessinStorage

При монтировании компонента устанавливаю обработчик изменения сессионного хранилища

 115
Ошибка при запуске Service Worker PWA
javascript

Ошибка при запуске Service Worker PWA

Внедряю на сайт PWAПри запуске Service Worker возникает следующая ошибка:

 145
Вызов модального окна ajax запросом
javascript

Вызов модального окна ajax запросом

Пытаюсь вызвать модальное окно с помощью ajax запроса но есть проблемаОкно по нажатию на кнопку вызывается только со 2 раза и после не закрывается...

 121