How can you detect a double click in a frame? - aframe

Question

This event seems to be missing from the standard events. Lick click, I would need to set up a listener for it in a component.

Answer 1

Thanks to Piotr for getting me on the right track. As of this post, there is no double click event for aframe, but we can use js/jquery to get around this. Here is the start of my function:
el.addEventListener('click', function(evt) {
\$('#myEmbeddedSce').on('dblclick', function(event) {
event.stopPropagation();
event.stopImmediatePropagation();
.....
The key was to add the jquery listener inside the aframe listener, and add the stop propagations so the doubleclicks only registered once.

Answer 2

use stopPropagation() to detect the double click in the frame.
The stopPropagation() method prevents propagation of the same event from being called. Propagation means bubbling up to parent elements or capturing down to child elements.
Syntax
event.stopPropagation()

Answer 3

I've solved the issue of detecting by taking tips from existing answers. Ie, tracking the difference of time and distance between clicks. For whatever reason the click listener did not give me clientX and clientY coordinates, so I used the distance vector instead.
This is my solution:
let prevClickTime = Date.now();
let prevVector = new Vector3(0, 0, 0);
// let pointString;
AFRAME.registerComponent('bar', {
init: function () {
this.el.addEventListener('click', (e) => {
const currClickTime = Date.now();
const currVector = e.detail.intersection.point;
const distance = currVector.distanceTo(prevVector);
const timeDiff = currClickTime - prevClickTime;
if (timeDiff < 260 && distance < 0.4) {
console.log('double click');
}
prevClickTime = currClickTime;
prevVector = currVector;
});
},
});
This was pointed at this aframe-react entity.
<Entity
class="interactable"
id="arrow"
bar
geometry={{ primitive: 'cylinder', width: 1, height: 0.05 }}
material={{ color: 'blue', opacity: 0.6 }}
position={`2 0.5 ${adj}`}
rotation="0 0 0"
/>