Коснитесь элемента в браузере (например, указатели-события: нет)

Проблема:

Я искал и искал, но я не могу найти информацию о том, как получить событие касания для запуска через элемент overlay. Я решил проблему для событий щелчка мыши, используя следующее:

pointer-events: none;

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

Проект:

Вот мой основной проект, Croppy. У меня есть рудиментарное приближение и хорошее перетаскивание, но мне мешает мой урожай на вершине холста (это, очевидно, необходимо, к сожалению). Приводится пример, если вы хотите напрямую поработать с ним. Я пытаюсь сделать все это без каких-либо внешних библиотек в качестве упражнения.

Любая помощь или указатели будут очень благодарны!

Ответ 1

Возможно, это должно было быть очевидным, но я нашел ответ. Только занятие pointer-events: none работает, но только редко, и мне нужно быстро передвигать пальцы, чтобы он срабатывал правильно. Чтобы заставить его работать на 100%, я добавил прослушиватель событий touchstart к элементу наложения, например:

overlay.addEventListener('touchstart', function(e){
  e.preventDefault();
});

Это кажется немного глупым, но, возможно, это связано с тем, как CSS и JavaScript наступают друг на друга в эти дни. Я не знаю.

Интересно, что без e.preventDefault() он все еще работает, но не в 100% случаев. Я не уверен, что строка строго необходима для правильной работы этой операции.

Изменить: это в Android Chrome 31.0.1650.59, кстати.