Почему не работает mousemove

Событие MouseMove не срабатывает на элемент страницы или документа

Я пытаюсь использовать слайдер js slick, но опция «перетаскивания» по умолчанию не работает, когда я включите код слайдера на моем сайте. Точнее говоря, я не могу зафиксировать события перемещения мыши в div слайда или в документе на моей веб-странице (Chrome).

Когда я запускаю код локально, у меня нет проблем с наблюдением событий mouseup, mousemove и mouseup, но когда я помещаю код слайдера на веб-страницу, я могу наблюдать только события mouseup и mousedown. ,

Ниже приведен рабочий локальный код. Если вы запустите его, он запишет события mousedown, mousemove и mouseup внутри ползунка div.

Когда я перемещаю тот же код на веб-сайт, я не могу наблюдать какие-либо события перемещения мышью, поступающие из ползунка div или из документа вообще. Может быть, уже запущено несколько js, которые полностью предотвратят перемещение мыши события от увольнения со страницы?

3 ответа

Проблема была в том, что конкретная хромированная вкладка. Я не знаю, почему у меня были проблемы, но обновление не изменило ничего — но когда я загрузил сайт в окне инкогнито и новом окне Chrome, он исправил это.

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

3-4 часа). Я не знаю, почему это повлияло бы на что-нибудь, но я хотел бы услышать, что кто-то думает, если у него есть какие-либо идеи.

Ваш местный код работает нормально. Захватить событие за документ, как

Проверьте это на сайте.

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

Если вы тестируете с помощью инструментов разработчика Chrome (скажем) и у вас активен профиль устройства, то Chrome будет эмулировать сенсорное взаимодействие и не будет отправлять события перемещения мыши (как в случае с телефоном / планшетом, когда браузер не может определить, когда палец пользователя, если он не касается экрана).

Если вы измените тип устройства с (например) «Рабочий стол (сенсорный)» на «Рабочий стол», вы сохраните желаемый размер экрана, но вернете события мыши.

Источник

Событие «mousemove» не срабатывает

Надо, чтобы падающие черточки разлетались при наведении мыши

Не срабатывает. Что тут не так?

2 ответа 2

Как уже ответили listener должен быть в методе init так-как там где он сейчас находится canvas ещё не определен. Но кроме того, просто поменять x/y в listener-е не получится так-как у каждой черточки своя x/y и прийдетса менять её у каждой черточки. И это нужно делать не в listener-е а в animate а то как только мышь перестанет двигаться, перестанут разлетаться и черточки.

Я вот тут написал версию вашего кода с изменениями которые я перечислил и с небольшой добавкой и очисткой кода:

Поместите код canvas.addEventListener. внутрь функции init после canvas = document.getElementById(«drawingCanvas»); .

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript события или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40485

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

mousemove в Chrome работает рывками

Во всех браузерах работает нормально а Chrome дергается.

И заодно может кто подскажет как это событие заставить работать на touch устройствах?

2 ответа 2

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

Чтобы работало быстрее, можно использовать более «дешёвую» для перформанса анимацию через свойства CSS3 transform . Такие анимации как перемещение, поворот, увеличение могут выполняться браузером супер-эффективно и быстро.

Набросал пример, чтобы оценить скорость перерисовки – картинка просто следует за мышью своим левым верхним углом. Сравните, насколько это более плавно/быстро?

С точки зрения motion design было бы здорово добавить движению фона небольшую инерционность. Будто картинка не жестко привязана к мыши, а на эластичной резинке, но без колебаний.

Это можно сделать просто через CSS, добавив transition: transform 0.4s ease-in-out; к анимируемому блоку. Но это криво работает с постоянным движением мыши – картинка с каждым скачком мыши будет в «плавном» начале очередного смягчённого движения — будет будто тормозить.

А лучше это можно сделать «кривой преследования» – представьте собаку, которая бежит по полю всегда прямо на зайца, где он находится в очередной момент. Координаты картинки в каждый момент времени получают инкремент как долю от вектора из картинки на мышку. Вот пример — тут я делал аж четыре цели, последовательно гоняющихся друг за другом и за мышкой. Для картинки достаточно мышки и первой за ней целью.

Источник

Заставьте сайт работать на сенсорных устройствах

Сенсорные экраны на мобильных телефонах, планшетах, ноутбуках и настольных компьютерах открыли веб-разработчикам целый ряд новых взаимодействий. В переведенном руководстве Патрик Локи рассматривает основы работы с сенсорными событиями в JavaScript. Все рассматриваемые далее примеры есть в архиве.

Нужно ли нам беспокоиться о касаниях?

С появлением сенсорных устройств основной вопрос от разработчиков: «Что мне нужно сделать, чтобы убедиться, что сайт или приложение на них работает?» Удивительно, но ответ — ничего. Мобильные браузеры по умолчанию справляются с большинством сайтов, которые не разрабатывались для сенсорных устройств. Приложения не только нормально работают со статичными страницами, но еще и обрабатывают интерактивные сайты с JavaScript, где сценарии связаны с событиями вроде наведения курсора.

Для этого браузеры симулируют или моделируют события мыши на сенсорном экране устройства. Простой тест страницы (example1.html в приложенных файлах) показывает, что даже на сенсорном устройстве нажатие кнопки запускает следующую последовательность событий: mouseover > mousemove > mousedown > mouseup > click.

Эти события вызываются в быстрой последовательности практически без задержки между ними. Обратите внимание на событие mousemove, обеспечивающее хотя бы единоразовое выполнение всех сценариев, запускаемых поведением мыши.

Если ваш сайт реагирует на действия мыши, его функции в большинстве случае будут по-прежнему работать на сенсорных устройствах, не требуя дополнительной модификации.

Проблемы симуляции событий мыши

Задержка кликов

При использовании сенсорных экранов браузеры умышленно задействуют искусственную задержку длительностью около 300 мс между действием касания (например, нажатием на кнопку или ссылку) и фактической активацией клика. Эта задержка позволяет пользователям совершать даблтапы (например, для увеличения и уменьшения изображения) без случайной активации других элементов страницы.

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

Отслеживание движения пальцев

Как мы уже заметили, синтетические события, отправляемые браузером, содержат событие mousemove — всегда только одно. Если пользователи слишком много водят пальцем по экрану, синтетические события не будут формироваться вообще — браузер интерпретирует такое движение как жест вроде прокрутки.

Это становится проблемой, если ваш сайт управляется путем движений мыши — например, приложение для рисования.

Давайте создадим простое canvas-приложение (example3.html). Вместо конкретной реализации посмотрим, как сценарий реагирует на движение мыши.

Если тестировать пример с помощью мыши, видно, что позиция указателя непрерывно отслеживается по мере перемещения курсора. На сенсорном устройстве приложение не реагирует на перемещение пальцев, а откликается только на нажатие, которое запускает синтетическое событие движения.

«Смотрите глубже»

Чтобы решить перечисленные проблемы, придется уйти в абстракцию. Сенсорные события появились в Safari для iOS 2.0, и после внедрения почти во всех браузерах были стандартизированы в спецификации W3C Touch Events. Новые события, зафиксированные в стандарте — touchstart, touchmove, touchend и touchcancel. Первые три спецификации эквивалентны стандартным mousedown, mousemove и mouseup.

Touchcancel вызывается, когда сенсорное взаимодействие прерывается — например, если пользователь выводит палец за предел текущего документа. Наблюдая за порядком, в котором вызываются сенсорные и синтетические события для нажатия, получаем (example4.html):

touchstart > [ touchmove ]+ > touchend > mouseover > (a single) mousemove > mousedown > mouseup > click.

Задействуются все сенсорные события: touchstart, одно или больше touchmove (в зависимости от того, как аккуратно пользователь нажимает на кнопку, не перемещая палец по экрану), и touchend. После этого запускаются синтетические события и происходит финальный клик.

Обнаружение сенсорных событий

Чтобы определить, поддерживает ли браузер сенсорные события, используется простой скрипт.

Этот фрагмент отлично работает в современных браузерах. У старых есть причуды и несоответствия, которые можно обнаружить, только если лезть из кожи вон. Если ваше приложение ориентировано на старые браузеры, попробуйте плагин Modernizr и его механизмы тестирования. Они помогут выявить большинство несоответствий.

При определении поддержки сенсорных событий мы должны четко понимать, что тестируем.

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

Работа над задержкой клика

Если мы протестируем последовательность событий, передаваемых в браузер на сенсорных устройствах и включающих информацию о синхронизации (example5.html), мы увидим, что задержка в 300 мс появляется после события touchend:

touchstart > [ touchmove ]+ > touchend > [300ms delay] > mouseover > (a single) mousemove > mousedown > mouseup > click.

Итак, если наши скрипты реагируют на клик, от задержки браузера по умолчанию можно избавиться, прописав реакции на touchend или touchstart. Мы делаем это, отвечая на любое из этих событий. Touchstart используется для элементов интерфейса, которые должны запускаться сразу при касании экрана — например, кнопок управления в html-играх.

Опять же, мы не должны делать ложных предположений о поддержке сенсорных событий и том, что приложение открыто именно на сенсорном устройстве. Вот один из распространенных приемов, который часто упоминается в статьях о мобильной оптимизации.

Хотя этот сценарий несет благие намерения, он основан на взаимоисключающем принципе. Реакция либо на клик, либо на касание в зависимости от поддержки браузера вызывает проблемы на гибридных устройствах — они немедленно прервут любое взаимодействие при помощи мыши, трекпада или касания.

Более надежный подход учитывает оба типа событий:

Проблема в том, что функция выполняется дважды: один раз при touchend, второй раз — когда запускаются синтетические события и клик. Обойти это можно, если подавлять стандартную реакцию на события мыши, используя preventDefault(). Мы также можем предотвратить повторение кода, просто заставляя обработчик touchend вызывать нужное click-событие.

С preventDefault() есть проблема — при его использовании в браузере подавляется любое другое поведение по умолчанию. Если мы применим его непосредственно к начальным событиям касания, будет блокирована любая другая активность — прокрутка, долгое движение мыши или масштабирование. Иногда это приходится к месту, но метод стоит использовать с осторожностью.

Приведенный пример кода не оптимизирован. Для надежной реализации проверьте его в FTLabs’s FastClick.

Отслеживание движения с touchmove

Вооружившись знаниями о сенсорных событиях, вернемся к трекинг-примеру (example3.html) и посмотрим, как его можно изменить, чтобы отслеживать движения пальцев на сенсорном экране.

Прежде чем увидеть конкретные изменения в этом скрипте, сначала поймем, как события касания отличаются от событий мыши.

Анатомия сенсорных событий

В соответствии с Document Object Model (DOM) Level 2, функции, которые реагируют на события мыши, получают объект mouseevent в качестве параметра. Этот объект включает свойства — координаты clientX и clientY, которые приведенный скрипт использует для определения текущей позиции мыши.

Например:

Как видим, touchevent содержит три различных тач-листа.

• Touches. Включает все точки соприкосновения, которые сейчас активны на экране, вне зависимости от элемента, к которому относится запущенная функция.
• TargetTouches. Содержит только точки касания, которые начались в пределах элемента, даже если пользователь перемещает пальцы за его пределами.
• ChangedTouches. Включает любые точки соприкосновения, которые изменились с последнего сенсорного события.

Каждый из этих листов представляет собой матрицу отдельных сенсорных объектов. Здесь мы найдем пары координат по подобию clientX и clientY.

Использование событий касания для отслеживания пальцев

Вернемся к примеру, основанному на canvas. Мы должны изменить функцию так, чтобы она реагировала и на сенсорные события, и на действия мыши. Нужно отследить перемещение единственной точки касания. Просто захватываем координаты clientX и clientY у первого элемента в массиве targetTouches.

При тестировании измененного сценария на сенсорном устройстве (example6.html) вы увидите, что отслеживание одиночного движения пальцем теперь надежно работает.

Если мы хотим расширить пример так, чтобы работал мультитач, придется немного изменить первоначальный подход. Вместо одной пары координат мы будем учитывать целый их ряд, который циклически обрабатывается. Это позволит отслеживать и одиночные клики мыши, и мультитач (example7.html).

Вопросы производительности

Как и события mousemove, во время движения пальцев touchmove может работать с высокой скоростью. Желательно избегать сложного кода — комплексных вычислений или целых событий рисования для каждого перемещения. Это важно для старых и менее производительных сенсорных устройств, чем современные.

В нашем примере мы выполняем абсолютный минимум — хранение последних массивов мыши или координат точек касания. Код приложения независимо выполняется в отдельном цикле с помощью setInterval.

Если количество событий, которое обрабатывается скриптом, слишком высоко, это заслуживает работы специальных решений — например, limit.js.

По умолчанию браузеры на сенсорных устройствах обрабатывают специфические сценарии мыши, но есть ситуации, когда нужно оптимизировать код под сенсорное взаимодействие. В этом уроке мы рассмотрели основы работы с сенсорными событиями в JavaScript. Надеемся, это пригодится.

Источник