I recently had the need to detect how long a button is pressed and perform different actions based on that. I found some examples on Stack Overflow, but the ones I looked at showed how to use timeout().

I came up with this. There are probably other ways to solve this. While searching, I found an example using IIFE in JavaScript, which I then used for this tiny example.


<button id="button">click</button>


(function(window, document, undefined){
    'use strict';
    var start;
    var end;
    var delta;
    var button = document.getElementById("button");

    button.addEventListener("mousedown", function(){
        start = new Date();

    button.addEventListener("mouseup", function() {
        end = new Date();
        delta = end - start;
        if (delta > 0 && delta < 500) {
            alert("less than half second:");
        if (delta > 1000) {
            alert("more than a second:");
})(window, document);
  • \$\begingroup\$ Welcome to Code Review! I have rolled back the last edit. Please see what you may and may not do after receiving answers. \$\endgroup\$
    – Heslacher
    Dec 11, 2015 at 10:55
  • 1
    \$\begingroup\$ Click the button, hold mouse down, move mouse off button, release button. No alert. Do you want it to alert in that case? \$\endgroup\$ Dec 11, 2015 at 13:57
  • \$\begingroup\$ No, not in this particular case. I assign it to a + button and give a team a goal. If I hold it for longer than three seconds it shall cancel a goal given to a team. \$\endgroup\$
    – kometen
    Dec 11, 2015 at 15:22
  • \$\begingroup\$ I think I see what you mean, I'll test. It shouldn't. I thought about it while making lasagne. \$\endgroup\$
    – kometen
    Dec 11, 2015 at 15:47
  • \$\begingroup\$ This solution does not work on my browser, which is Iron Version 65.0.3400.0 (Official Build) (64-bit) (Iron is based on Chrome, so I'd suspect this also doesn't work with the latest Chrome anymore). The problem is that buttons seem to immediately fire an event when clicked. This can be fixed by just changing the html to use: <div id="button">click</button> or you can just give most any other element the id of "button" and it should work. Here's an example of a fiddle I made which uses a font-awesome icon which has been given the id "button": jsfiddle.net/f6a1cys9/2 \$\endgroup\$ Mar 18, 2019 at 22:58

3 Answers 3


500 and 1000 should be constants.

Where you have them now you need to look through to find them in code when you want to change them. I know this is an example, but they're also meaningless. 500 doesn't tell you why half a second matters, but TIMEOUT tells you what the purpose of the number is. Declare your time values at the top of the function with clear names that denote what they're for.


The end variable could be removed and you could add a return in the if statements.

You could use Date.now() instead of creating a new Date object if Internet Explorer < 9 is not a problem. And the "delta > 0" is technically not required.

  • \$\begingroup\$ Thank you. You are right, delta > 0 ought not be necessary but I included it as a habit. Will try Date.now(). \$\endgroup\$
    – kometen
    Dec 11, 2015 at 18:50

window and document are global variables. You don't need to pass them into your function. Why have undefined as a third variable?

Also, better practice is to only use the word var once. So it would be something like this:

var start,
    button = document.getElementById('button');
  • 1
    \$\begingroup\$ "only use the word var once" depends on the developer. Also, it's a readability issue, not knowing what something is until you go else where. You don't know if you're in the middle of an object, an array, variable declaration, an expression etc. until you scroll up to see what came before it. \$\endgroup\$
    – Joseph
    Dec 11, 2015 at 18:20
  • \$\begingroup\$ That's what your code gets minimized down to. If you follow the Crockford rules and guidelines for the JavaScript Ninja, you'll have a better idea of where you're at, regardless of how long the list of declarations are. With a single grouping of your declarations at the top of your scope and maintaining that consistency, your code will look a lot cleaner. \$\endgroup\$
    – krillgar
    Dec 11, 2015 at 19:00
  • \$\begingroup\$ Thank you. I found an example with javascript IIFE when searching on google for anonymous functions and that example also had undefined. But true, unnecessary in this context. \$\endgroup\$
    – kometen
    Dec 11, 2015 at 20:20
  • \$\begingroup\$ medium.com/@iampika/… - undefined was mutable in ES3 \$\endgroup\$
    – CherryDT
    Apr 21, 2021 at 9:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.