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.

Answer 1

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.