'ar.js Click event triggered when the marker is showing but not clicked on smartphone

I have html and javascript code and the click event is triggered about 3 seconds after the marker popped up but not tapped.

This occurs only when I use the app on browser of smartphone. Can anybody please help to solve this problem?

<a-marker
        emitevents="true"
        markerhandler
        cursor="fuse: false; rayOrigin: mouse"
        id="animated-marker"
        preset="custom"
        raycaster="objects: .clickable"
        url="./assets/markers/pattern-test_marker.patt"
        type='pattern'
        value='6'
>

AFRAME.registerComponent("markerhandler", {
init: function () {
    const animatedModel = this.el;
    let isMarkerVisible = false;
    animatedModel.addEventListener('click',  (ev, target) => {
        const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
        if (animatedModel && intersectedElement === animatedModel) {
            const objectId = animatedModel.id;
            console.log(`click event on ${objectId} fired`);
            window.location.href = './event_page.html';
        }
    })
}
})

I have not seen any problem when I run this on my laptop, but it does when I publish it and test it on mobile devices.

I have tried the code below, but this has not helped me to solve this problem

cursor="fuse: false"

https://github.com/jeromeetienne/AR.js/issues/416#issuecomment-425078800

https://aframe.io/docs/0.8.0/components/cursor.html#properties_fuse



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source