У меня есть сцена A-Frame с 8 кубами. Я ставлю этот скрипт после него:
document.addEventListener("touchstart", function(evt){
//console.log(evt);
if (!evt.isTrusted) return;
holded_m = true;
var touches_m = evt.changedTouches;
var touch_m = touches_m[touches_m.length-1]
mousePosX_m = touch_m.pageX;
mousePosY_m = touch_m.pageY;
rotX_m = ent_m.getAttribute("rotation")["x"];
newRotX_m = rotX_m;
newRotY_m = rotY_m;
})
document.addEventListener("touchend", function(evt){
holded_m = false;
rotX_m = newRotX_m;
rotY_m = newRotY_m;
})
document.addEventListener('touchmove', function(evt){
if (!holded_m) {return;}
//console.log(rotX - (mousePosY - evt.screenY)/10);
var touches_m = evt.changedTouches;
var touch_m = touches_m[touches_m.length-1];
newRotX_m = rotX_m - (mousePosY_m - touch_m.pageY)/slowing_m;
newRotY_m = rotY_m - (mousePosX_m - touch_m.pageX)/slowing_m;
ent_m.setAttribute("rotation", newRotX_m.toString() + " " + newRotY_m.toString() + " 0");
});
cube_8_m = document.querySelector("#cube_8_m")
cube_8_m.addEventListener("click", function(evt){
console.log(evt);
if (!clicked_m) {
clicked_m = true;
cube_8_m.emit("out");
desc_div_m.style.display = "block";
desc_header_m.innerHTML = "Some text"
desc_text_m.innerHTML = "Some text"
current_block_href = "https://some.com/"
console.log("out");
}
else {
clicked_m = false;
cube_8_m.emit("in");
desc_div_m.style.display = "none";
console.log("in");
}
})
Когда я щелкаю по выделенному кубу мышью по десктопу - событие «щелчка» срабатывает только один раз, как и должно быть. Но на мобильных устройствах в 90% случаев нажатие на куб запускает два «клика». Я зарегистрировал их на консоли, и они идентичны, но вторая срабатывает ~ через одну секунду после первой.
У меня не было никакой другой обработки кликов в коде. Я обнаружил, что касание экрана где-то еще, а не на кубе, удерживание касания и перемещение его на куб и отпускание затем запускают одно нажатие. Единственный. Я не знаю, почему это происходит, но я хочу, чтобы один клик = одно событие.