Блог

В моем приложении пользователь (студент) входит в приложение, просто сдвинув knob вправо, и CLICKS статус пользователя переключается с absent на present . Это отлично работает на tablets . Но при использовании laptops/desktops , когда ученик перемещает ручку в правую сторону с помощью курсора, это происходит attach с помощью курсора, я имею в виду, если пользователь перемещает курсор обратно в левую сторону, ручка тоже перемещается, не нажимая на нее. Я хочу исправить эту проблему в том смысле, что когда пользователь перемещает ручку вправо и щелкает, она должна отмечать присутствие и автоматически переключаться в предыдущее (левое) положение, а не преследовать курсор!

Код

 $(function() {
    var e = 2;
    $(".slider").each(function() {

        function u() {
            o.css({
                "-webkit-transform": "translateZ(0)",
                "-webkit-transition": "opacity 0.25s",
                "-webkit-animation": "textani 2s linear infinite forwards",
                opacity: 1
            })
        }

        function a() {
            o.css({
                "-webkit-transition": "none",
                "-webkit-animation": "none"
            })
        }

        function f(e) {
            i.css({
                "-webkit-transition": "none"
            });
            t = e
        }

        function l(n) {
            var r = Math.max(n - t, 0);
            if (r   i.width() > s.width()) {
                r = s.width() - i.width() - e * 2
            }
            var f = Math.max(80 - r, 0) / 80;
            if (f > 0) {
                a()
            } else {
                u()
            }
            i.css({
                left: r   e
            });
            o.css({
                opacity: f
            });
        }


        function c(t) {

            function o() {
                i.css({
                    "-webkit-transform": "translateZ(0)",
                    "-webkit-transition": "left 0.25s cubic-bezier(0.5, 0.1, 0.7, 1.5)",
                    left: e
                });
                u();
            }

            var n = parseInt(i.css("left")) / (s.width() - i.width()   e);
            if (n > .95) {
                changeStatus();

                //  var a = r.attr("href");
                //  window.location = a;
                setTimeout(o, 250)
            } else {
                o()
            }
        }

        var t, n;
        var r = $(this);
        var i = $(this).children(".knob");
        var s = $(this).children(".track");
        var o = $(this).children(".text");
        i.bind("touchstart", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            f(oev.touches[0].pageX);
        });
        i.bind("touchmove", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            l(oev.touches[0].pageX);
        });
        i.bind("touchend", function(e) {
            e.preventDefault();
            oev = e.originalEvent;
            c(0);
        });
        i.bind("mousedown", function(e) {
            f(e.screenX);
            $(document).bind("mousemove.knob", function(e) {
                l(e.screenX);
                return false;
            });
            $(document).bind("mouseup.knob", function(e) {
                c(0);

            });
            return false;
        });
    });
});
  

Я только что добавил новую строку кода, которая просто отключила событие наведения курсора мыши, и оно работает нормально :

 i.bind("mousedown", function(e) {
            f(e.screenX);
            $(document).bind("mousemove.knob", function(e) {
                l(e.screenX);
                return false;
            });
            $(document).bind("mouseup.knob", function(e) {
                $(document).unbind("mousemove.knob");  //   this line
                c(0);
                $(document).unbind(".knob");   
             });
            return false;
        });