通过单击事件停止元素上的双击事件

Question

I have a JSFiddle here which lays out my problem: http://jsfiddle.net/Paddy/86YSN/7/ . It's a very simple marquee- the little white boxes simply move to the next/previous slide when clicked.

If you double click one, things go wrong, and a slide gets stuck out of position. I've been trying to find out how to simply disable the double click event for those elements for hours- I've tried this method:

$('#arrow_left').bind('dblclick',function(e){
    e.preventDefault();
});

but no luck. Can anyone help?

(Many thanks).

Answer 1

You could forget about the dblclick event and just stop any animations already running by adding this line

$('.marquee_photos').stop(true,true);

into the functions called when processing the next animation. Working example -> http://jsfiddle.net/86YSN/11/

docs on stop() here

Answer 2

You should just check to see if its currently animated, if it isn't then go ahead and run your animation again. This allows your animation to finish, and I think is more in line with what you are wanting vs using the .stop().

if(!$('.marquee_photos').is(":animated")){
   //your code here
}

JSFIDDLE HERE