Как правильно задать тип события мыши?
Если задать event: Event, то element.addEventListener работает корректно, но в функции вылетает ошибка
function scroll(event: Event) { const pos = event.pageX // Property 'pageY' does not exist on type 'Event'. } |
function scroll(event: Event) { const pos = event.pageX // Property 'pageY' does not exist on type 'Event'. }
Если поменять на React.MouseEvent, то ошибка типизации в функции scrollпропадает
function scroll(event: React.MouseEvent) { ... }
Но появляется ошибка в добавлении слушателя element.addEventListener('mousedown', scroll)
No overload matches this call. Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event) |
No overload matches this call. Overload 1 of 2, '(type: keyof ElementEventMap, listener: (this: Element, ev: Event)
Дополнительно:
React.MouseEvent - это события реакта, их нельзя передавать в addEventListener, только в ноды реакта.
Event - это наиболее обобщенный тип события.
Вам нужен тип MouseEvent, в нём будет соответствующее свойство.
Ну и сам element должен иметь тип HTMLElement или производные по идее.
- Спасибо, заменил
const tableWrapper = ref.current as Element | null
наconst tableWrapper = ref.current as HTMLElement | null function scroll(event: MouseEvent) { ... }
const tableWrapper = ref.current as HTMLElement | null function scroll(event: MouseEvent) { ... }
и заработало
- MishaXXL, а зачем Вы используете утверждение "as" для содержимого рефа?
При создании рефа через useRef можно и нужно передавать тип, который мы планируем там содержать:
const ref = useRef<HTMLElement | null>(null)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для правильного задания типа события мыши в JavaScript, необходимо использовать метод addEventListener(). Этот метод позволяет добавить слушатель событий к определенному элементу, который будет реагировать на определенное событие (например, клик мыши).
Пример кода на JavaScript:
var element = document.getElementById("myElement"); element.addEventListener("click", function() { alert("Вы кликнули по элементу!"); });
В данном примере мы выбираем элемент по его id с помощью метода getElementById() и добавляем к нему слушатель события "click". Когда пользователь кликает по этому элементу, выполняется функция, которая выводит сообщение с помощью метода alert().
Если нужно задать другие типы событий мыши, например, двойной клик или наведение курсора, то достаточно заменить "click" на соответствующий тип события в методе addEventListener().
Таким образом, правильный способ задать тип события мыши в JavaScript - использовать метод addEventListener() для добавления слушателя событий к определенному элементу.