How can you detect a double click in a frame?

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.

This should be helpful https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event — Piotr Adam Milewski, Feb 21 '19 at 10:13

score 0 · Answer 1 · answered Feb 22 '19 at 11:26

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.

score 0 · Answer 2 · answered Feb 22 '19 at 11:33

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()

score 0 · Answer 3 · answered Oct 27 '22 at 07:35

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"
/>

How can you detect a double click in a frame?

3 Answers3