Touchstart на краю целевого элемента вызывает mousedown

Question

Я заметил очень странное поведение, возможно, ошибку. У меня есть вертикальное меню с анкерами и разделителями. У якорей есть пользовательские обработчики событий для mousedown, touchstart, pointerdown. Проблема в том, что когда я нажимаю и палец закрывает как привязку, так и разделитель (разделитель больше закрыт), то вместо touchstart выполняется событие mousedown. Мне удалось воспроизвести его в простой выборке. Я протестировал его на андроидном хроме и на рабочем столе с хром-инструментами для сенсорной эмуляции. Просто коснитесь области между якорем и разделителем, и вы увидите, что браузер зарегистрировал событие mousedown вместо события touchstart. Может кто-нибудь сказать мне, что случилось? Это ошибка, или я сделал что-то неправильно? Это происходит только с якорями, если бы вместо якорей были абзацы, это не произошло.

Вот пример: http://jsbin.com/huhariluva/edit?js,console,output

Answer 1

Край не поддерживает сенсорные события. Таким образом, touchstart ничего не делает и предотвращает вызов Default, так что mousedown выполняется. Вместо этого вы можете использовать события указателя и использовать PEP для полирования для хром и других браузеров.

Pointer События: https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

PEP: https://github.com/jquery/PEP

Answer 2

мне удалось преодолеть эту проблему. Решение состоит в том, чтобы добавить прослушиватель событий touchstart к другому элементу, который щелкнул, и вызывает ошибку и вызывает событие event.preventDefault().

Я также отправил ошибку на трекер хрома.