0

Imagine a div like this:

<div class="list">
    <ul>
        <li class="user">Nickname 1</li>
        <li class="user">Nickname 2</li>
    </ul>
</div>

I would like to do as on all smartphones when I maintain "Nickname 1" for more than 3 seconds a div opens in full screen with a large vertical menu, and then when the button is released the menu should not close

Should I use onclick or onpress?

Do you have an idea ?

This kind of menu is seen everywhere on the smartphone for example "Block" a user or "Delete the conversation" etc.

Thank.

CodeBoyCode
  • 2,227
  • 12
  • 29
jacke
  • 59
  • 1
  • 9
  • 1
    https://stackoverflow.com/a/4080508/965834 should help. Probably need to replace `mouse*` event with `touchstart` / `touchend` tho. – Jeto Sep 22 '18 at 20:02
  • For months I used only mouse and also clearTimeout while the clearInterval works better indeed. Thank. – jacke Sep 22 '18 at 23:08

1 Answers1

0

I have not done that functionality ever. So I do not know if there is already a library that does what you want.

If there is not, then you could easily manually implement this:

You will need to watch for the mousedown event and mouseup event and you are also going to need a timer.

When the mousedown event start the timer with 3 seconds and on the callback do what you want (e.g., open the menu). If the mouseup event is triggered, stop the timer so the callback will not be executed.

fnmps
  • 143
  • 6