click and hold to scroll, touchstart, touchmove, touchend
===

I have a scrollable div. I want people to be able to scroll the list through 'hold', and also select a button for click.

The problem is that when a button is held in order to scroll the div, it is triggering the click function.

I want that do not trigger when scrolling. I need some way to differentiate click of the hold function.

So I'm using:

    $('.panel').bind("touchstart mousedown", function (e) {
    console.log(e.type);
    $(this).addClass('resize');

    }).bind("touchmove mousemove", function (e) {
    $(this).removeClass('resize');

    }).bind("touchend mouseup", function (e) {
    $(this).removeClass('resize');
    $('.panel').addClass('flip');
    });

I thought the following solution.

When `'.panel'` is `mousedown` for more than `500 ms`, the button activates, pressed:

    $(this).addClass('resize');

When `'.panel'` is `mouseup`, the button returns to its normal state and then all the buttons make the movement of output:

    $(this).removeClass('resize');
     $('.panel').addClass('flip');

BUT if the user `mousemove`, the `mousedown` and `mouseup` actions are canceled.

just do not know how to put this into practice

is something similar to that:
http://m.microsoft.com/windowsphone/en-us/demo/default.aspx

Please Suggest.