# Ui\_button: distinguish normal and long push

**URL:** <https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247>\
**Category:** Dashboard\
**Created:** [7 March 2023 16:49 UTC](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247 "2023-03-07T16:49:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mortimer](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@Mortimer](https://discourse.nodered.org/u/Mortimer)\
**Post date:** [7 March 2023 16:49 UTC](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247/1 "2023-03-07T16:49:16Z")

</div>

Dear all,

I need to distinguish between a normal and long press/touch when ui\_button is used. With this, I would like to emulate a KNX push button with the same functionality in the nodered dashboard.

Any chance to get there, e.g. using ui\_template?

---

<div class="post-metadata">

**Author:** ![Mortimer](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@Mortimer](https://discourse.nodered.org/u/Mortimer)\
**Post date:** [7 March 2023 17:08 UTC](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247/2 "2023-03-07T17:08:06Z")

</div>

OK, with the idea from ["long press" ui element - #4 by hugobox](https://discourse.nodered.org/t/long-press-ui-element/22134/4) I got it solved.

```auto
<div id="longPress">
    <md-button ng-model="msg.payload">Long</md-button>
</div>

<script>
    (function($scope) {
    let timerTreshold = false
    let timer;
    
    $('#longPress').on('touchstart mousedown', function(e) {
        e.preventDefault(); //prevent default behavior
        timer = setTimeout(function() {timerTreshold = true; console.log("long");}, 1000);
    });
    
    $('#longPress').on('touchend mouseup', function(e) {
        e.preventDefault(); //prevent default behavior
        clearTimeout(timer);
        
        if (!timerTreshold){
            console.log("short");
        }

    timerTreshold = false;
    
    });
    
})(scope);
</script>

```

Is there a way to use `{{$id}}` to make this template universal?

---

<div class="post-metadata">

**Author:** ![Mortimer](https://avatars.discourse-cdn.com/v4/letter/m/9fc29f/32.png) [@Mortimer](https://discourse.nodered.org/u/Mortimer)\
**Post date:** [7 March 2023 17:22 UTC](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247/3 "2023-03-07T17:22:37Z")

</div>

Also got this solved. The trick is waiting until document has finished loading using jQuery ducment ready function `$(function() {})`.

```auto
<div id="{{$id}}">
    <md-button ng-model="msg.payload">Long</md-button>
</div>

<script>
    (function($scope) {
    let timerTreshold = false
    let timer;

    $(function() {
    
        $('#'+$scope.$id).on('touchstart mousedown', function(e) {
            e.preventDefault(); //prevent default behavior
            timer = setTimeout(function() {timerTreshold = true; console.log("long");}, 1000);
        });
        
        $('#'+$scope.$id).on('touchend mouseup', function(e) {
            e.preventDefault(); //prevent default behavior
            clearTimeout(timer);
            
            if (!timerTreshold){
                console.log("short");
            }

        timerTreshold = false;
        
        });
    });
    
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 March 2023 17:22 UTC](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247/4 "2023-03-21T17:22:58Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.