Anythingslider Touch Swipe функциональность останавливает нормальное нажатие на ссылки на IOS и планшетных устройствах

Я использую плагин что-нибудь слайдер jquery с сенсорными событиями. Похоже, что он работает должным образом на всех устройствах, что позволяет пользователям "пролистывать" прикосновения к планшетам и устройствам iOS и с помощью мыши на рабочем столе.

$('#slider').anythingSlider({   
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {

var time = 1000, // allow movement if < 1000 ms (1 sec)
        range = 50,  // swipe movement of 50 pixels triggers the slider
        x = 0, t = 0, touch = "ontouchend" in document,
        st = (touch) ? 'touchstart' : 'mousedown',
        mv = (touch) ? 'touchmove' : 'mousemove',
        en = (touch) ? 'touchend' : 'mouseup';

    slider.$window
        .bind(st, function(e){
            // prevent image drag (Firefox)
            e.preventDefault();
            t = (new Date()).getTime();
            x = e.originalEvent.touches ? 
                e.originalEvent.touches[0].pageX : e.pageX;
        })
        .bind(en, function(e){
            t = 0; x = 0;
        })
        .bind(mv, function(e){
            e.preventDefault();
var newx = e.originalEvent.touches ? 
           e.originalEvent.touches[0].pageX : e.pageX,
            r = (x === 0) ? 0 : Math.abs(newx - x),
            // allow if movement < 1 sec
            ct = (new Date()).getTime();
            if (t !== 0 && ct - t < time && r > range) {
                if (newx < x) { slider.goForward(); }
                if (newx > x) { slider.goBack(); }
                t = 0; x = 0;
            }
        });

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

щелчок мышью на рабочем столе все еще работает, и пользователи могут переходить к статьям.

Любая идея о том, как заставить это работать на всех устройствах?

т.е. мне нужно иметь возможность скользить, а также выбирать ссылки в слайдере.

я думаю, что у меня есть следующие варианты: 1. ограничить эффект прокрутки изображениями, оставляя текстовое поле активным; 2. добавить опцию jquery, чтобы при нулевом движении активировать ссылку; 3. изменить z-индекс текста выше. div "swipe overlay"

я понятия не имею, как кодировать варианты 1 или 2. совет, пожалуйста?

Пункт 3 я постараюсь в настоящее время.

3 ответа

Решение

Вы - слушатель события touchstart, который выполняет функцию protectDefault(), которая предотвращает всплывание события до события click. Если вы удалите его, но сохраните его в движении и завершите события, оно должно работать.

В качестве альтернативы (если вы не хотите изменять их источник), вы можете привязать следующий обработчик к событию Click TouchSwipe (я использую jQuery, но вы поняли идею):

function (e, target) { $(target).click(); }

Это будет раздувать событие.

ОБНОВЛЕНИЕ С КОДОМ ОБРАЗЕЦ SNIPPET:

$(document).swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
  },
  click:function (event, target) {
    $(target).click();
  },
  threshold:75
});

Вы просто должны удалить это:

e.preventDefault();
Другие вопросы по тегам