Getting different behaviors for clicking on an image vs holding the mouse down

[Weston C]

I'm working on a small javascript application where I'd like to get one
behavior when a user clicks on an image (image swap), but when they
simply hold down the mouse button for a second, they get another
behavior (drop down menu).

The former seems pretty easy -- just assign the handler for the onClick
event to the swapping function. The latter, however, seems more
involved.... I know I'd assign the onMouseDown handler to a different
function, and then.... after a 1 second or so I'd want to test whether
or not the mouse buttom was still being held down. Except that I have no
idea how to do that (both the waiting part and the actual test itself).

The idea that does occur to me is to have some kind of data structure
associated with the clickable image. I could have functions associated
with the onMouseUp and onMouseDown handlers to set a flag.... as soon as
onMouseDown is called, it sets the flag to 0, then it waits 1 second,
and checks to see if the flag is 0. If onMouseUp has been called, it
will have set the flag to 1, and we call the plain old click handler. If
the flag is still 0, then I know to do the popup/drowpdown menu.

I'm a little worried about the timing between the different flows of
control, though, and I'm also wondering if there's not simply a better
way to do it.

Thanks,
Weston

~==~
http://weston.canncentral.org/
weston8[at]cann8central.org
(remove eights to email me)

 

[Eric Bohlman]

I'm working on a small javascript application where I'd like to get one
behavior when a user clicks on an image (image swap), but when they
simply hold down the mouse button for a second, they get another
behavior (drop down menu).

The former seems pretty easy -- just assign the handler for the onClick
event to the swapping function. The latter, however, seems more
involved.... I know I'd assign the onMouseDown handler to a different
function, and then.... after a 1 second or so I'd want to test whether
or not the mouse buttom was still being held down. Except that I have no
idea how to do that (both the waiting part and the actual test itself).

You have the onMouseDown handler set a flag and start a timeout, and the
onMouseUp handler clear the flag and clear the timeout. The code specified
by the timeout first checks to see if the flag is still set (if not, it
does nothing) and if so, it clears the flag and performs the "hold down"
action (e.g. put up the menu).

If you want the image swap to occur regardless of whether or not the menu
is pulled up, put it in the onMouseDown handler. Otherwise, put it in the
onMouseUp handler and do it only if the flag is set (so it won't be
performed when the button is released after the timeout action). This
means that the image swap will occur on the button being released rather
than it being pressed, but that's the only logical way to ensure that only
one action can happen.