#фишка дня

Не так давно я писал о доступном внедрении таблицы в документ: https://yangx.top/htmlshit/1285

Суть была в том, чтобы дать контейнеру таблицы возможность принимать фокус. Для скроллинга и т. д.

Но что если для вашего UX критично понимать, что произошёл фокус внутрь контейнера?

Например, при фокусе внутрь группы полей ввода на форме надо показать некое предупреждение.

Решение есть! Смотрим: https://codepen.io/alinaki/pen/PoRrVom

Здесь event.currentTarget это непосредственно элемент, в котором произошло событие, а relatedTarget — элемент, принимающий следующее событие того же вида, если такой присутствует в документе.

Событийный элемент содержит в себе следующий — мы попали в группу. Ясное дело, это существует не только для onBlur.

Подробнее:
Focus-события: https://udn.realityripple.com/docs/Web/API/FocusEvent/relatedTarget

События мыши: https://udn.realityripple.com/docs/Web/API/MouseEvent/relatedTarget

#event #focus #blur #mouse #js

#заметка дня

Автор прекрасной борды tldraw.com выложил вопрос-демонстрацию: «Как же отличить мышь от тачпада?» Ведь они, по мнению браузера, вроде как одно устройство ввода.

И на видео чётко видно, что на тачпаде скроллить во всех направлениях получается точнее, сильно точнее, чем мышью.

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

И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript

Приложу сюда кратчайший сниппет:

  var isTrackpad = false;
  if (e.wheelDeltaY) {
    if (e.wheelDeltaY === (e.deltaY * -3)) {
      isTrackpad = true;
    }
  }
  else if (e.deltaMode === 0) {
    isTrackpad = true;
  }
  console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}

document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);

И пример: https://jsfiddle.net/ucLe3hLa/

Вот только из мышей у меня имеется Logitech MX Master 3 и её колёсико... слишком плавное. Даже в дискретном режим. Браузер опять же определяет её как тачпад :)

В общем, счастья нет. Действительно рабочего способа отличить мышь от тачпада — не существует.

Потому предлагайте пользователям мыши другие способы взаимодействия с холстом, если речь о борде или вращении камеры. Кликнуть-и-потянуть на мышке всё ещё удобнее, чем скроллить в разные стороны.

#mouse #touchpad #event