当鼠标在mousedown和mouseup之间移动时，如何使用javascript捕获鼠标单击

Question

I am building a website with a scrolling javascript time line, using code from this tutorial . There is a demo to go with the tutorial here .

My problem is as follows: if the user clicks on the timeline to drag it, and they happen to click on a link, then when the mouse button is released, the browser interprets that as a click on the link. Hence, it's very easy to navigate away from the timeline by accident.

The behaviour I would like is as follows: clicking on a link only triggers navigation if the mouse has not been moved between mousedown and mouseup. If the mouse has been moved while the button is held down, then the link is not followed, since the user is trying to move the timeline rather than click on a link.

Is this possible? I have a feeling we need a is_mouse_moved boolean variable that is set to false on mousedown and set to true on mousemove. Then on mouseup we check whether to "pass on" the mouseup event to the browser. As you can tell, I'm not overly familiar with js!

Any help appreciated.

Answer 1

You can stop all events in javascript (jQuery framework for instance) when the mouse click on a link. Event.stop() You can try this or you can program that when the cursor is over the link, wait an instant to activate it.

Answer 2

You probably want to store the coordinates when a mousedown event is triggered, and read the coordinates in your mouseup to see if they have changed by a significant amount. Quirksmode has pretty good documentation on reading coordinates from mouse events:

http://www.quirksmode.org/js/events_properties.html

Answer 3

Your correct. The solution is just create a flag variable that whenever the user drags the timeline, ( event.preventDefault() ) the anchor tags. This solution might pose more errors though because what if the user "accidentally" slightly drags the timeline but what he/she wants is to click the link? the timeline might not be that responsive anymore.

My suggestion is, prevent default all anchor tags then use double click to visit a particular link.