簡體   English   中英

Mobile Safari中的自定義“滑動”事件未觸發

[英]Custom “swipe” events in Mobile Safari not firing

我為jQuery編寫了一個模擬移動事件的插件,但也支持標准的Web瀏覽器。 這是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將無法運行。

誰能提供任何指針?

如果我沒有完全弄錯e (在回調事件中)有一個數組觸及移動瀏覽器。 每個觸摸事件都有一個元素。

這是一個例子:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM