A-Frame/JS mobile "click" fires twice

Question

I have A-Frame scene with 8 cubes. I put this script after it:

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");

                }
            })

When I click on selected cube with mouse on desctop - "click" event fires only once as should be. But on mobile devices in 90% cases tapping on cube fires two "clicks". I logged them to console and they are identical, but the second fires ~one second after the first.

I havn't any other click handling in code. I found that touching screen somewhere else, not on cube, holding touch and moving it on cube and releasing then fires one click event. Only one. I don't know why does it happen, but I want to have one click = one event.

Answer 1

I don't know if this is still helpful for you or not. Here's a work around solution to prevent triggering click event twice on mobile.

https://glitch.com/edit/#!/profuse-forest-sword

The point is adding

cursor="rayOrigin: mouse; fuseTimeout: 0"