Question

I have mouse actions triggering a custom function on the html and body, however the scroll bars and a form I have on the page has now become unresponsive to mouse clicks!

$('html,body').bind('mousedown mouseup mouseover mousemove', function(e){
    e.preventDefault(); //this is required :(
    customFunction();
});

(Why do I need prevent default? full customFunction here)

How do I preserve the body binding while keeping the form usable and the scroll bars functioning?

I have a JSFiddle demo here, showing exactly what is happening:
http://jsfiddle.net/Ywg9T/

Answer 1

This is a bug in jQuery, related to the event for starting a selection. It fires way too frequently. There is a ticket filed for it, and it scheduled to be fixed in 1.8. In the meantime, you can fix this problem by hackily removing that event handler (where ‘element’ is the element you want to disable it for — in your case, the whole document):

element.onselectstart = function () { return false; };

Then you don’t have to do preventDefault. So, your code would look something like this:

document.onselectstart = function () { return false; };
(function($){
    var drag = false;
    $("#click").bind('mousedown mouseup mouseover mousemove', function(e) {
        if(e.type === 'mouseover'){ ... }
        if(e.type === 'mousemove'){ ... }
        if(e.type === 'mousedown'){ ... }
        if(e.type === 'mouseup'){ ... }
    });
})(jQuery);