Гиперссылки не выбираются на ощупь в демонстрации Three.js

Question

Просто тестирую недавний учебник Three.js @ https://tympanus.net/Tutorials/StickyImageEffect/, и я обнаружил несколько проблем, которые озадачили меня при попытке отладки.

Во-первых, при тестировании на iPad и паре смартфонов гиперссылки кажутся активными, но не реагируют на прикосновения и касания. Похоже, «липкий» эффект / three.js полностью контролирует область просмотра и не позволяет сенсорным устройствам получать доступ к ссылкам.

Что нужно было бы дополнить, чтобы позволить выбор ссылок, и при этом также игнорировать срабатывание "залипающего" эффекта при этом?

Во-вторых, при просмотре на iPad в альбомной ориентации в верхней части окна просмотра есть небольшой зазор.

Будет ли это вообще связано с курсором, который не используется на сенсорных устройствах?

Answer 1

Я бы поискал по коду в поиске "touchstart" и увидел, вызван ли preventDefault. Это .

Одним из решений может быть добавление собственного обработчика touchstart для <a> тегов

Давайте проверим

document.querySelector('#outer').addEventListener('touchstart', (e) => {
  e.preventDefault();
});

#outer {
  padding: 2em;
  background: #EEE;
}

<div id="outer">
   is <a href="https://stackoverflow.com">this link</a> touchable
</div>

Код, приведенный выше, препятствует работе ссылки.

Добавление нашего собственного обработчика событий к самим ссылкам и запретить их распространение. Таким образом, они не будут переданы содержащему их элементу, который вызывает preventDefault и предотвращает выполнение вещи по умолчанию (по ссылке)

document.querySelector('#outer').addEventListener('touchstart', (e) => {
  e.preventDefault();
});

document.querySelectorAll('a').forEach((elem) => {
  elem.addEventListener('touchstart', stopPropagation);
  elem.addEventListener('touchmove', stopPropagation);
  elem.addEventListener('touchend', stopPropagation);
});

function stopPropagation(e) {
  e.stopPropagation();
}

#outer {
  padding: 2em;
  background: #EEE;
}

<div id="outer">
   is <a href="https://stackoverflow.com/">this link</a> touchable
</div>

Это кажется работать на меня.

Нет понятия о разрыве. У меня нет iPad для репо, и, похоже, он не репо в эмуляции iPad Chrome Devtools