Click event triggered two times when gazing to an object

Question

I'm using gaze buttons but when the click event is triggered, the function is executed two times. See code snippet below.

var number = 0;

document.getElementsByTagName('a-sphere')[0].addEventListener('click', function(){
    alert('You\'ve clicked the sphere ' + (++number) + ' times.');
});

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <!-- this is my object that must execute a click event when looked -->
    <a-sphere position="0 0 -7" color="red">
    </a-sphere>

    <!-- camera -->
    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <!-- progress bar -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <!--<a-cursor color="red"></a-cursor>-->
            <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-entity>
    </a-camera>
</a-scene>

How could I prevent this situation of two times clicking on an object? It must be triggered just one time when it's clicked.

Are you testing/previewing on desktop? Because the drag-to-move will trigger a click. — ngokevin, May 19 '17 at 19:51
@ngokevin: Yes, I'm testing on desktop. PS: There is an snippet added in my question where you could test it. — H. Pauwelyn, May 20 '17 at 07:50

score 0 · Answer 1 · answered May 19 '17 at 10:06

I've made a workaround to prevent this issue

var number = 0;

document.getElementsByTagName('a-sphere')[0].addEventListener('click', function(){
    if(this.getAttribute('data-clicked') === null || this.getAttribute('data-clicked') === 'false') {
        this.setAttribute('data-clicked', 'true');
        alert('You\'ve clicked the sphere ' + (++number) + ' times.');
    }
    else {
        this.setAttribute('data-clicked', 'false');
    }
});

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <!-- this is my object that must execute a click event when looked -->
    <a-sphere position="0 0 -7" color="red">
    </a-sphere>

    <!-- camera -->
    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <!-- progress bar -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <!--<a-cursor color="red"></a-cursor>-->
            <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
            <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
        </a-entity>
    </a-camera>
</a-scene>

Of course this is not a good way of preventing the issue, but it's working.

Click event triggered two times when gazing to an object

1 Answers1