Я создаю рекламные баннеры с использованием библиотеки Create js, и у меня возникла проблема с событием click и включением событий Touch. Эта проблема возникает на мобильных устройствах Chrome и Firefox.
У баннеров есть событие щелчка, которое прикрепляется к большой кнопке, которая соответствует полному размеру холста. Также есть кнопка меньшего размера, которая открывает небольшое наложение, где пользователь может прокручивать небольшое окно, поэтому мне нужно включить сенсорные события.
Проблема, с которой я сталкиваюсь, заключается в том, что эти баннеры расположены ниже страница, и пользователь прокручивает страницу, если его палец попадает на мой баннер во время прокрутки (смахивание вверх или вниз), он запускает событие click.
Проблема исчезает, когда я отключаю сенсорные события, но тогда прокрутка в моем окне наложения больше не работает на мобильном телефоне. Эта проблема не возникает в iOS Safari.
Я создал очень простой тест, который поместил в фрейм страницы, достаточно длинной для прокрутки, и он точно воспроизводит проблему.
Вот код javascript для теста, который я сделал.
stage = new createjs.Stage("testCanvas");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);
var rect = new createjs.Shape();
rect.graphics.beginFill("#ff0000").drawRect(0, 0, 300, 250);
rect.x = 0;
rect.y = 0;
stage.addChild(rect);
stage.update();
rect.addEventListener("click", onHotspotClick.bind(this));
function onHotspotClick(evt) {
window.open(clickTag, '_blank');
}
Я знаю, что могу использовать isTouch для определения касания против щелчка, но есть ли способ определить, является ли пользователь пролистывающим документ против прослушивания?