Question

I am using drag and scroll in my page, which is working with the 3 simple handlers mousedown, mousemove and mouseup.

Now i have 2 Issues:

1. all my .on('click' and .click( events are kind of broken, because since the div is scrolling with the mouse, the cursor stays on the same object and the event fires. How can i change the handler so it only fires when the distance of mousemove between mousedown and mouseup is less than a fixed value? Is it even possible or do i have to create an own one and change all the code? —SOLVED—
2. I am using event.preventDefault(); during this drag&scroll to prevent Selection. This results in the user not being able to click on form fields. Is there an easy way to fix this or do i have to stop the selection in another way? —SOLVED WITH WORKAROUND—

Any ideas would be helpful.

These are the 3 handlers for scrolling:

    mouseDownHandler : function(event) {

        if (!$(event.target).closest('.stopscroll').length) {

            event.data.lastCoord = {left: event.clientX, top: event.clientY}; 

            $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
            $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

            $('body').addClass('dragcursor'); //// Add Move Cursor

            if (!$(event.target).closest('.noformelement').length) {
                event.preventDefault();
                return false;
            }
        }

    },

    mouseMoveHandler : function(event) { 
        var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};

        event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

        $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

        event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

        event.data.lastCoord={left: event.clientX, top: event.clientY}

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }

    },

    mouseUpHandler : function(event) {
        $.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
        $.event.remove( document, "mouseup", dragscroll.mouseUpHandler);

        $('body').removeClass('dragcursor');

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

Update/Bump: Just disabling EVERY click event at once would already solve the problem i guess. I tried $(document).on('click', '*', function() {return false;}); but it does not work…

Answer 1

Solved with

mouseDownHandler : function(event) {

    if (!$(event.target).closest('.stopscroll').length) {

        event.data.lastCoord = {left: event.clientX, top: event.clientY}; 
        event.data.startCoord = {left: event.clientX, top: event.clientY};
        event.data.allowClick = true;
        $('*').off('click.stop');

        $.event.add( document, "mouseup", dragscroll.mouseUpHandler, event.data );
        $.event.add( document, "mousemove", dragscroll.mouseMoveHandler, event.data );

        if (!$(event.target).closest('.noformelement').length) {
            event.preventDefault();
            return false;
        }
    }

},

mouseMoveHandler : function(event) { 
    var delta = {left: (event.clientX - event.data.lastCoord.left), top: (event.clientY - event.data.lastCoord.top)};
    var range = {left: (event.clientX - event.data.startCoord.left), top: (event.clientY - event.data.startCoord.top)};
    if (event.data.allowClick && (Math.abs(range.left)>=5 || Math.abs(range.top)>=5)) {
        event.data.allowClick = false;
        $('*').on('click.stop', function() {return false;});
        $('body').addClass('dragcursor'); //// Add Move Cursor
    }

    event.data.scrollable.scrollLeft(event.data.scrollable.scrollLeft() - delta.left);

    $('.th-header').css('margin-left', -event.data.scrollable.scrollLeft()); //// Scrollsync with header

    event.data.scrollable.scrollTop(event.data.scrollable.scrollTop() - delta.top);

    event.data.lastCoord={left: event.clientX, top: event.clientY}

    if (!$(event.target).closest('.noformelement').length) {
        event.preventDefault();
        return false;
    }

}