# How to listen to doubleClick and longPress for a GUI Button?

**URL:** <https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687>\
**Category:** Questions\
**Tags:** gui, pointerevents\
**Created:** [May 11, 2023, 8:05am UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687 "2023-05-11T08:05:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TmTron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tmtron/32/32106_2.png) [@TmTron](https://forum.babylonjs.com/u/TmTron)\
**Post date:** [May 11, 2023, 8:05am UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/1 "2023-05-11T08:05:54Z")

</div>

Meshes and Scenes support `OnDoublePickTrigger` and `OnLongPressTrigger`.  
But how can we handle double-click and long-press triggers for a **GUI Button**?

In the [Docs: GUI - Events](https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#events) I can see that we can handle a click (`onPointerClickObservable`) and this works in the [Playground](https://playground.babylonjs.com/#7RH606)

Am I missing something, or is this just a missing Feature?  
If so: is there an easy way to implement this? Maybe I can reuse the **ActionManager** somehow or use **RxJs** (based on `onPointerEnterObservable` and `onPointerOutObservable`)?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [May 11, 2023, 8:35am UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/2 "2023-05-11T08:35:51Z")

</div>

Let’s ping @PolygonalSun here 🙂

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [May 11, 2023, 3:33pm UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/3 "2023-05-11T15:33:01Z")

</div>

AFAIK, the only way to get double click and long click to work would be to manually implement something using the button’s observables (@carolhmj or @RaananW, feel free to correct me if I’m wrong). For example, you could always store the current time that a `pointerdown` occurred and then check it in the onPointerClick to see if the time exceeded some value:

```auto
var time = 0;
...
    button.onPointerDownObservable.add(function() {
        time = Date.now();
    });
    button.onPointerClickObservable.add(function () {
        const deltaTime = Date.now() - time;

        if (deltaTime >= 500) {
            console.log("Long Click");
        }
...

```

For double-click, you’d have to check the time between clicks and determine if it’s less than some value:

```auto
var clickTime = 0;
...
    button.onPointerClickObservable.add(function () {
        const deltaDoubleTime = Date.now() - clickTime;

        if (deltaDoubleTime < 500) {
            console.log("Double Click");
            // If we have a double-click, reset the timer so that a third click doesn't trigger another double-click
            clickTime = 0;
        }
        else {
            clickTime = Date.now();
        }
...

```

Putting these together may require some timing checks and logic to prevent unnecessary clicks but this would be the gist of it.

---

<div class="post-metadata">

**Author:** ![TmTron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tmtron/32/32106_2.png) [@TmTron](https://forum.babylonjs.com/u/TmTron)\
**Post date:** [May 11, 2023, 3:44pm UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/4 "2023-05-11T15:44:48Z")

</div>

@PolygonalSun thanks for the answer. I see what you mean.  
This logic becomes quite complicated when we also want to have `longPress` (then we need a timer).

Should I file a feature-request on GitHub, so that these events will eventually be added to GUI elements in the future?

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [May 11, 2023, 3:51pm UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/5 "2023-05-11T15:51:51Z")

</div>

I’d recommend posting a request on the [Feature Requests](https://forum.babylonjs.com/c/features/11) page of the forum to start out.

---

<div class="post-metadata">

**Author:** ![TmTron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tmtron/32/32106_2.png) [@TmTron](https://forum.babylonjs.com/u/TmTron)\
**Post date:** [May 12, 2023, 7:15am UTC](https://forum.babylonjs.com/t/how-to-listen-to-doubleclick-and-longpress-for-a-gui-button/40687/6 "2023-05-12T07:15:01Z")

</div>

Link to related Feature Request: [Add doubleClick and longPress for a GUI Button](https://forum.babylonjs.com/t/add-doubleclick-and-longpress-for-a-gui-button/40729)