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
});