# "long press" ui element

**URL:** <https://discourse.nodered.org/t/long-press-ui-element/22134>\
**Category:** Dashboard\
**Created:** [23 February 2020 11:26 UTC](https://discourse.nodered.org/t/long-press-ui-element/22134 "2020-02-23T11:26:53Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [24 February 2020 16:37 UTC](https://discourse.nodered.org/t/long-press-ui-element/22134/4 "2020-02-24T16:37:17Z")

</div>

Hi @moryoav!  
Here's a quick hack that hopefully works for you, if you press on it (either mobile or desktop) for more than 1 second, the toggle switch will change but not output back to Node-Red:

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

<script>

(function($scope) {
    
let timerTreshold = false
let timer;
let msg = {"payload": false}
    
$('#longPress').on('touchstart mousedown', function(e) {
    e.preventDefault(); //prevent default behavior
    timer = setTimeout(function() {timerTreshold = true; msg.payload = !msg.payload; console.log(msg.payload)}, 1000);
});

$('#longPress').on('touchend mouseup', function(e) {
    e.preventDefault(); //prevent default behavior
    clearTimeout(timer)
    if (!timerTreshold){
        msg.payload = !msg.payload
        $scope.send(msg);
    }
    timerTreshold = false;
    
});
    
})(scope);
</script>

```

---

_[View the full topic](https://discourse.nodered.org/t/long-press-ui-element/22134)._