Anythingslider触摸滑动功能可以停止正常点击IOS和平板电脑设备上的链接

Question

我正在使用任何滑块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设备"选择"(链接激活),文本保持悬停css样式,但触摸不起作用.

通过鼠标在桌面上单击仍然有效,用户可以点击文章.

关于如何在所有设备上运行的任何想法？

即我需要能够滑动并选择滑块中的链接.

我认为我的选项是:1.限制对图像的滑动效果,使文本框可单击2.添加到jquery选项,如果没有移动激活链接3.更改文本的z-index以上'滑动叠加'div

我不知道如何编写选项1或2.请注意？

第3项我将在同一时间尝试.

Answer 1

或者(如果你不想修改它们的源代码)你可以将以下处理程序绑定到TouchSwipe的Click事件(我正在使用jQuery,但你明白了):

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

这将使事件冒出来.

更新代码示例SNIPPET:

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