jquery - Anythingsliderタッチスワイプ機能により、IOSおよびタブレットデバイスのリンクの通常のクリックが停止します

Question

タッチイベントでanythingスライダー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

タッチスタートイベントリスナーは、イベントがクリックイベントまでバブリングするのを防ぐpreventDefault（）を呼び出しています。削除しても、移動イベントと終了イベントで保持すると、機能するはずです。

Answer 3

これを削除する必要があります：

e.preventDefault();