javascript - 子の上でマウスダウンすると、ドラッグ/スワイプするとジャークが発生します

Question

カスタムマウスベースのスワイプイベントを作成するために、次のコードに取り組んでいます。

「o：swipe」イベントが開始されたときに「mousedown」イベントに値として渡したい$('.element')ので、「mousedown」イベントと「mousemove」イベントは、スワイプイベント用に選択した要素でのみ機能し、子要素では機能しませんに$('.element')。

現在、「mousedown」イベント内に子が配置されている$('.element')場合、「mousedown」イベントはそれをターゲットとして受け取り、クリックした場合はその pageX の位置を取得しますが、同じ$('.element')ことが必要なため、「o:swipe」イベントから値を渡す必要があります「マウスダウン」イベント。

現在、 の子をクリックすると、移動時にジャークが発生します$('.element')。

ここにjsbinがあります

$(function(){

    var te = {};

    $('body').on('mousedown', function(e) {

        var ti = e;
        te.target = $(ti.target);
        te.bX = ti.pageX;
        te.lastX = te.target.position().left;

    }).on('mousemove', function(e) {

        te.eX = e.pageX;
        te.position = te.lastX + ( -1 * (te.bX - te.eX));
        te.target.trigger('o:swipe',{ pos : te.position });

    }).on('mouseup', function(e) { te = {}; });


    // ============ SWIPE EVENT SECTION ================

    $('.element').on('o:swipe', function(e, to) {

        $(e.target).closest($(this)).css( 'left' , to.pos + 'px');

    });

});