【问题标题】:Custom "swipe" events in Mobile Safari not firingMobile Safari 中的自定义“滑动”事件未触发
【发布时间】:2011-11-02 23:01:32
【问题描述】:

我为 jQuery 编写了一个模拟移动事件的插件,但也支持标准的网络浏览器。这是swipeleftswiperight 事件的标记:

(function($) {

    var settings = {
        swipe_h_threshold : 30,
        swipe_v_threshold : 50,
        taphold_threshold : 750,
        startevent        : ('ontouchstart' in document.documentElement) ? 'touchstart' : 'mousedown',
        endevent          : ('ontouchstart' in document.documentElement) ? 'touchend'   : 'mouseup'
    };
    // swipeleft Event:
    $.fn.swipeleft = function(handler) {
        return this.each(function() {

            $this = $(this);
            var start_x = 0;
            var end_x   = 0;

            $this.bind(settings.startevent, function(e) {
                e.stopPropagation();
                e.preventDefault();
                start_x = e.pageX;

                $this.one(settings.endevent, function(e) {
                    end_x = e.pageX;
                    if(start_x > end_x && (start_x - end_x >= settings.swipe_h_threshold))
                    {
                        handler.call(this);
                    }
                });
            });
        });
    };

    // swiperight Event:
    $.fn.swiperight = function(handler) {
        return this.each(function() {

            var $this = $(this);
            var start_x = 0;
            var end_x   = 0;

            $this.bind(settings.startevent, function(e) {
                e.preventDefault();
                e.stopPropagation();
                start_x = e.pageX;

                $this.one(settings.endevent, function(e) {
                    end_x = e.pageX;
                    if(start_x < end_x && (end_x - start_x >= settings.swipe_h_threshold))
                    {
                        handler.call(this);
                    }

                });
            });
        });
    };
}) (jQuery);

然后我使用以下命令调用事件:

$('#my_div').swiperight(function() { self.nextCard('r'); }); $('#my_div').swipeleft(function() { self.nextCard('r'); });

这似乎在桌面浏览器上运行良好(好吧,无论如何都是 Chrome)> http://ben-major.co.uk/labs/carousel.html,但似乎在 Mobile Safari 中不起作用。 swipeleft 执行没有问题,但 swiperight 不会运行。

谁能指点一下?

【问题讨论】:

    标签: javascript jquery events mobile safari


    【解决方案1】:

    如果我没有完全弄错e(在事件回调中)在移动浏览器上有一个数组。每个触摸事件都有一个元素。

    这里是一个例子:

    document.addEventListener('touchmove', function(event) {
        event.preventDefault();
        var touch = event.touches[0];
        console.log("Touch x:" + touch.pageX + ", y:" + touch.pageY);
    }, false);
    

    【讨论】:

    • 但是swipeleft 怎么会正常运行呢?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-15
    相关资源
    最近更新 更多