jQuery: workaround for touchmove not firing on when finger dragged across elements

Question

I have a set of 6 div panels that can be moused down & over or touched. As soon as each panel is hit, I log that and then do something after all 6 have been hit

mousedown and mousemove are working as expected but for mobile, touchmove is triggering only on the first panel I move my finger over.

I understand this is because of the way touchmove works but I'm struggling to come up with a workaround for what I'm trying to achieve, that is know when all 6 panels have been touched.

Example (works with mouse but try on mobile) http://jsfiddle.net/xT7n7/3/embedded/result/

Relevant Code:

// when one of the 6 panels is moused over
$("div.panel").bind("mousemove", (function () {
    if (is_mouse_down) {

        total_hits++;

        $("body").append('<p>Panel has been hit</p>');

        if ($(this).hasClass('win')) {
            win_hits++;
        }

        $(this).unbind('mousemove');
    }
}));

// when one of the 6 panels is 'touched'
$("div.panel").bind("touchmove", (function () {

    total_hits++;

    $("body").append('<p>Panel has been hit</p>');

    if ($(this).hasClass('win')) {
        win_hits++;
    }

    $(this).unbind('touchmove');
}));

EDIT: As per a comment, I have tried to modify the code by following the suggestions in this post (http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/) but it made no difference.

EDIT 2: It looks like I may be able to work around it by checking all canvas elements on mouseup/touchend and comparing them to a blank (untouched) instance of the canvas using toDateURL()

Fiddle: http://jsfiddle.net/xT7n7/10/