# 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:** 1
**Showing post:** 2

<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?

---

_[View the full topic](https://discourse.nodered.org/t/ui-button-distinguish-normal-and-long-push/76247)._