How to capture a mouse click using javascript when the mouse has moved between mousedown and mouseup

Question

I am building a website with a javascript scroll bar using the code in this tutorial . There is a demo with a tutorial here .

My problem is this: if the user clicks on the timeline to drag it and they click on the link, then when the mouse button is released, the browser interprets this as a click on the link. Therefore, it is very easy to easily move away from the timeline.

The behavior I would like is the following: clicking on the link only starts navigation if the mouse was not moved between mousedown and mouseup. If the mouse was moved when the button is held down, the link is not executed because the user is trying to move the timeline rather than clicking the link.

Is it possible? I have a feeling that we need the boolean variable is_mouse_moved , which is set to false in mousedown and true to mousemove. Then, on mouseup, we check whether the mouseup event needs to be "passed" to the browser. How can you say I'm not too familiar with js!

Any help was appreciated.

Answer 1

Your correct. The solution simply creates a flag variable, which whenever the user drags the timeline, ( event.preventDefault () ) anchor tags. This solution may present more errors, though, because if the user “accidentally” drags the timeline a little, but what he wants to do is click the link? the timeline may not be as responsive.

My suggestion is to prevent by default all anchor tags, then use a double click to go to a specific link.

Answer 2

You can stop all events in javascript (for example, in jQuery) by clicking on the link. Event.stop () You can try this or you can program it when the cursor is on a link, wait instantly to activate it.

Answer 3

You probably want to save the coordinates when the mousedown event fires and read the coordinates in your tooltip to see if they have changed a significant amount. Quirksmode has some pretty good documentation on reading coordinates from mouse events:

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