Question

在我的应用中，用户（学生）只需将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;
        });
    });
});

Answer 1

我刚刚添加了一行新代码，它只是解除了鼠标悬停事件及其工作正常：

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

如何在移动光标时停止旋钮运动？

1 个答案: