JavaScript: Dragging Mouse on Links

Question

I'm trying to make a calendar page where you can click and drag to select multiple calendar days at once. Everything works fine in Google Chrome, but in Firefox, when I try to start dragging, it fails. The reason for this is that each calendar day is contained in a link (<a></a>). When you try to drag links in Firefox, it does its own action. Is there any way I can prevent this or work around it?

Answer 1

If you're using jQuery, do the following. $( "a" ).click(function(){ return false; });

return false prevents the browser's defaults.

Answer 2

For IE you can also add:

    // prevent text selection in IE
    document.onselectstart = function () { return false; };
    // prevent IE from trying to drag an element
    target.ondragstart = function() { return false; };

Answer 3

I ran into this issue, saw your thread. In my case, I handling the lower level mouse events, not click. I found that on jQuery's mousedown (http://docs.jquery.com/Events/mousedown#fn) I could suppress Firefox's special behavior calling event.preventDefault (http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29) on the incoming mouse event.

I was calling it on other event handlers, but I suspect just mousedown() is sufficient to stop browsers from doing their custom drag behavior.