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

这将使事件冒泡。

使用代码示例片段更新：

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

Answer 2

您的 touchstart 事件侦听器正在调用 PreventDefault() ，这会阻止事件冒泡到单击事件。如果您删除它，但将其保留在移动和结束事件中，它应该可以工作。

Answer 3

你只需要删除这个：

e.preventDefault();