How to click a button and make it do something but when you hold down the mouse it does something else

1

When I click on “BlackJackIcon” I want it to switch the screen, but when I hold down the mouse it needs to switch to another screen and run a different set of code.

2

Hi @spoonrogers,

It is helpful if you let us know what you have tried and also post a share link to your code. I am guessing that you have tried the two different events for click and onmousedown. My thinking tells me you might need to use a timer so that if the user has triggered the onmousedown greater than one or two seconds, it triggers one set of code but if it is less than that, it triggers the code for a click. Perhaps others will share different ideas here as well.

~Michelle

1 Like
3

A solution would be to have an onEvent listening for a mousedown event, and another listening for mouseup. First, declare some variables.

var holding;
var time = 500;

When mousedown is detected, set holding to true. Then, call setTimeout with the time variable, the value of which is how long you have to hold the button down (can be any value of your choice, it’s 500 ms in this case). If holding is still true after 500 ms, set holding to false and execute the code that runs when button is held down.

onEvent("BlackJackIcon", "mousedown", function( ) {
  holding = true;
  setTimeout(function(){
    if (holding){
      console.log("Button held down");
      holding = false;
      // rest of code
    }
  }, time);
});

So when a mouseup is detected, if holding is true and the button is being held (we check this because we don’t want to switch screens if the code that runs after button is held, was already executed), then set holding to false, and switch screens.

onEvent("BlackJackIcon", "mouseup", function( ) {
  if (holding){
    holding = false;
    setScreen("screen2");
  }
});