touch - jQuery: 要素間で指をドラッグしたときに touchmove が起動しないための回避策

Question

マウスを上下に動かしたり、触れたりできる6つのdivパネルのセットがあります。各パネルがヒットされるとすぐに、それをログに記録し、6 つすべてがヒットされた後に何かを行います

mousedown と mousemove は期待どおりに機能しますが、モバイルの場合、touchmove は指を動かした最初のパネルでのみトリガーされます。

これは touchmove の仕組みによるものだと理解していますが、私が達成しようとしていることの回避策を見つけるのに苦労しています.6つのパネルすべてに触れたときです.

例 (マウスで動作しますが、モバイルで試してください) http://jsfiddle.net/xT7n7/3/embedded/result/

関連コード:

// 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');
}));

編集: コメントに従って、この投稿 ( http://www.devinrolsen.com/basic-jquery-touchmove-event-setup/ ) の提案に従ってコードを変更しようとしましたが、違いはありませんでした。

編集 2: マウスアップ/タッチエンドですべてのキャンバス要素をチェックし、それらをキャンバスの空白の (手つかずの) インスタンスと比較することで回避できるようです。toDateURL()

フィドル: http://jsfiddle.net/xT7n7/10/