jquery - How to capture mouse click with Javascript when the mouse has moved between mousedown and mouseup - Stack Overflow

admin管理员组

文章数量:1335135

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.

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.

• javascript
• jquery
• mouseevent
• jquery-events

Share Improve this question Follow edited Jan 25, 2022 at 19:32 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 20, 2010 at 9:24 mojonesmojones 1,68033 gold badges1515 silver badges2626 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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.

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.

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/js/events_properties.html

本文标签：