Click event triggered two times when gazing to an object - aframe

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.