Пользовательские события смахивания - PullRequest
Новая
       6

Пользовательские события смахивания

3 голосов
/ 03 ноября 2011

Я написал плагин для jQuery, который имитирует мобильные события, но также поддерживает стандартные веб-браузеры. Вот разметка для событий swipeleft и swiperight: 

(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 , но, похоже, не работает в мобильном Сафари. swipeleft выполняется без проблем, но swiperight не будет работать вообще.

Может кто-нибудь предложить какие-нибудь указатели?

1 Ответ

2 голосов
/ 03 ноября 2011

Если я не полностью ошибаюсь, e (в обратном вызове события) имеет массив, затрагивающий мобильные браузеры. Он имеет один элемент для каждого сенсорного события.

Вот пример: 

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