15 Dec

jQuery Mousehold Event

I'm working on a web application for Work and we're working towards recreating an existing desktop application on a web page (don't get me started on that one!).

Anyway, traditional applications have 'spinners' that make numbers or items go up and down (I'm working on that too). This jQuery plugin adds the missing 'repeat' event.

Download the mousehold plugin.

The 'repeat' is when you keep a key pressed down and it keeps printing the character, or you keep the mouse button pressed down and it keeps firing the click event.

The plugin works by setting a 'mousedown' event and keeps firing the function at the given interval until the 'mouseup' event or the mouse moves off the element.

This last logic is because if it wasn't in place, the function specified would keep firing (since the mouse up event fired, but not on the element we set it on).

Here's an example that shows a practical example.

Feedback and so on is welcome. If you're interested in the 'stepper' code, feel free to ask.

11 Responses to “jQuery Mousehold Event”

Rey Bango December 15th, 2006 at 8:26 pm

Very cool Remy!
Alex December 20th, 2006 at 12:24 am

Hey, glad to see the error was fixed... great plugin, thanks!
George January 14th, 2007 at 10:08 pm

Hi there, if you're after a spinner then it's worth checking this one out. (Uses background image on a textbox to look and act like a spin box.)
phantom January 26th, 2007 at 4:29 am

Awesome!!! Thanks
ramya February 15th, 2007 at 1:04 pm

i can tunder stand the function of it
Steve March 15th, 2007 at 11:07 pm

Not bad. But I think a typical spinner will also have a longer delay up front to make sure the user is intending to hold down the button, then a much shorter delay when continuing to poll and increment the value.

davinci27 June 1st, 2007 at 12:56 am

I like the idea, but it doesn't seem to work with the "this" I need to pass a funciton that would get executed in context of the jquery object, so I could use "this" to reference which element to work with. This is Whay I used.

jQuery.fn.mousehold = function(timeout, f) {
  if (timeout && typeof timeout == 'function') {
    f = timeout;
    timeout = 100;
  }
  if (f && typeof f == 'function') {
    var timer = 0;
    jQuery.fireObj = 0;
    return this.each(function() {
      jQuery(this).mousedown(function() {
        jQuery(this).each(f)
        jQuery.fireObj = this;
        timer = setInterval("jQuery(jQuery.fireObj).each(" + f + ")", timeout);
      })

      clearMousehold = function() {
        clearInterval(timer);
        jQuery.fireObj = 0;
      }

      jQuery(this).mouseout(clearMousehold);
      jQuery(this).mouseup(clearMousehold);
    })
  }
}

Blog Author Remy Sharp June 1st, 2007 at 8:17 am
@ davinci27 - I didn't initially understand what you meant, but I think now you're saying that the function passed in isn't executed against the context of the element the plugin was attached to.

If so, I've found the error and made the change. It was quite simple and doesn't require setting a variable within the jQuery object (which I would generally avoid for fear of conflicts or race conditions):
```
f.call(this, ctr);
```
'this' within the context of the setInterval is Window, rather than the element it was set against. So I've changed the plugin as follows:
```
[snip]
var t = this;
timer = setInterval(function() {
  ctr++;
  f.call(t, ctr);
[snip]
```
This way, as I'm caching this in the t variable, when I execute f.call it's against the correct element.

This has been updated in the plugin code now.
fedmich April 13th, 2008 at 3:48 pm

Great timing, I need one now. Thanks

To George, the url you gave, http://www.softwareunity.com/sandbox/JQuerySpinBtn/ is also great.

Thanks to both of you
ivow April 28th, 2008 at 9:16 pm

Nice one! Just what I needed!
老孔的Blog » Blog Archive » List of Useful jQuery Plugins May 28th, 2008 at 6:05 am

[...] Extra selectors for JQuery Add more selectors to jQuery. Mousewheel Mousewheel event handler. Mousehold Event Add repeating event as the user holds down the mouse. Multiple File Upload Select multiple files [...]

remy sharp's b:log

jQuery Mousehold Event

11 Responses to “jQuery Mousehold Event”

Post Meta

Related Posts

Popular Today

Noteworthy