3

我正在使用任何带有触摸事件的滑块 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 我将同时尝试。

4

3 回答 3

7

或者（如果您不想修改它们的源），您可以将以下处理程序绑定到 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
});
于 2012-08-12T02:06:45.480 回答
3

您是 touchstart 事件侦听器正在调用 preventDefault() 以防止事件冒泡到 click 事件。如果您将其删除，但将其保留在移动和结束事件中，它应该可以工作。

于 2012-01-05T20:01:00.707 回答
1

你只需要删除这个：

e.preventDefault();
于 2012-12-12T08:41:29.420 回答