如何获取 swipeUp 和 swipeDown 事件？

Question

您好，我正在使用 向上滑动 和 向下滑动 功能，它可以在桌面上运行，但不能在移动浏览器上运行。所以请建议我如何解决它？我不想使用 jquery 手机。

这是我的 jquery 代码。

var supportTouch = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
        touchStopEvent = supportTouch ? "touchend" : "mouseup",
        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
    setup: function() {
        var thisObject = this;
        var $this = $(thisObject);
        $this.bind(touchStartEvent, function(event) {
            var data = event.originalEvent.touches ?
                    event.originalEvent.touches[ 0 ] :
                    event,
                    start = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ],
                        origin: $(event.target)
                    },
                    stop;

            function moveHandler(event) {
                if (!start) {
                    return;
                }
                var data = event.originalEvent.touches ?
                        event.originalEvent.touches[ 0 ] :
                        event;
                stop = {
                    time: (new Date).getTime(),
                    coords: [ data.pageX, data.pageY ]
                };

                // prevent scrolling
                if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                    event.preventDefault();
                }
            }
            $this
                    .bind(touchMoveEvent, moveHandler)
                    .one(touchStopEvent, function(event) {
                $this.unbind(touchMoveEvent, moveHandler);
                if (start && stop) {
                    if (stop.time - start.time < 1000 &&
                            Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                            Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                        start.origin
                                .trigger("swipeupdown")
                                .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                    }
                }
                start = stop = undefined;
            });
        });
    }
};

$.each({
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
}, function(event, sourceEvent){
    $.event.special[event] = {
        setup: function(){
            $(this).bind(sourceEvent, $.noop);
        }
    };
});

$(document).on('swipedown',function(){console.log("swipedown..");} );
$(document).on('swipeup',function(){console.log("swipeup..");});

这里是live fiddle。

Answer 1

此代码依赖 jquery 移动设置 $.support.touch 来确定要绑定的事件。没有 jquery 移动设备，这是未定义的，所以...

touchStartEvent = supportTouch ? "touchstart" : "mousedown";
/* touchStartEvent will always = mousedown unless $.support.touch = true */

以下代码可以在移动设备上运行，但我不推荐这样做。在这种情况下，确实没有理由不使用 jquery 移动设备。 jQuery 将比你更好地处理交叉 platform/browser 不一致，你可以只使用 8kb 的触摸事件来自定义构建库......这没什么，即使是 AOL Dialup 用户也会喜欢 "woah that JS loaded really fast"

$.support.touch = true;
var supportTouch = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
        touchStopEvent = supportTouch ? "touchend" : "mouseup",
        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
    setup: function() {
        var thisObject = this;
        var $this = $(thisObject);
        $this.bind(touchStartEvent, function(event) {
            var data = event.originalEvent.touches ?
                    event.originalEvent.touches[ 0 ] :
                    event,
                    start = {
                        time: (new Date).getTime(),
                        coords: [ data.pageX, data.pageY ],
                        origin: $(event.target)
                    },
                    stop;

        function moveHandler(event) {
            if (!start) {
                return;
            }
            var data = event.originalEvent.touches ?
                    event.originalEvent.touches[ 0 ] :
                    event;
            stop = {
                time: (new Date).getTime(),
                coords: [ data.pageX, data.pageY ]
            };

            // prevent scrolling
            if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
                event.preventDefault();
            }
        }
        $this
                .bind(touchMoveEvent, moveHandler)
                .one(touchStopEvent, function(event) {
            $this.unbind(touchMoveEvent, moveHandler);
            if (start && stop) {
                if (stop.time - start.time < 1000 &&
                        Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
                        Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                    start.origin
                            .trigger("swipeupdown")
                            .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
                }
            }
            start = stop = undefined;
        });
    });
}
};

$.each({
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
}, function(event, sourceEvent){
    $.event.special[event] = {
        setup: function(){
            $(this).bind(sourceEvent, $.noop);
        }
    };
});

$(document).on('swipedown',function(){console.log("swipedown..");} );
$(document).on('swipeup',function(){console.log("swipeup..");});

如何获取 swipeUp 和 swipeDown 事件？

how to get swipeUp and swipeDown event?

jquery

swipe