jQuery Mobil dokunma hareketi yalnızca dokunmatik ekran için ve fare için değil

Question

Dokunmatik ekran kullanıcılarının, hızlıca sola hareket ettirerek web sitelerinde ileri geri hareket etmelerine ve sağa doğru hareket ettirmelerini sağlamak için jQuery Mobile kullanıyorum. Sorun şu ki, swipeleft ve swiperight olayları da normal bir fare ile tetikleniyor ve bu çok can sıkıcı çünkü kullanıcı fareyle bir metin seçtiğinde ortaya çıkıyor.

Sorunu web sitesinde (http://laetitia-stucki.ch/) ve aşağıdaki JavaScript snippet'inde görebilirsiniz.

Kaydırma olaylarını yalnızca dokunmatik aygıtlarla değil, normal bir fare ile nasıl tetikleyeceğinizi biliyor musunuz?

"use strict"; 
$(document).ready(function() { 
    (function() { 
    $("body").on("swiperight", function(e) { navigate_prev_page(); }); 
    $("body").on("swipeleft", function(e) { navigate_next_page(); }); 
    function navigate_next_page() { 
     var target_page = $(".button-next").first().attr("href"); 
     window.location.href = target_page; 
    } 
    function navigate_prev_page() { 
     var target_page = $(".button-prev").first().attr("href"); 
     window.location.href = target_page; 
    } 
    })(); 
}); 

Answer 1

Cevabınız için teşekkürler Gjermund Dahl. Bağlantınızı takip ettim ve http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ numaralı ilginç bir bağlantı daha buldum ve sonunda bir çözüm bulmayı başardım. Buradaki fikir, mousedown olayı tetiklendiğinde ve touchstart olayı tetiklendiğinde yeniden etkinleştirmek için swipe olayını devre dışı bırakmaktır. Çözümümü aşağıda gönderiyorum. Gördüğünüz gibi jQuery Mobile ve Mousetrap kütüphaneleri birlikte çalışabilir.

"use strict"; 
$(document).ready(function() { 
    (function() { 

    var navigate_to_page = function(e, button_class) { 
     var target_page = $(button_class).first().attr('href'); 
     window.location.href = target_page; 
    } 

    Mousetrap.bind('left',  function(e) { navigate_to_page(e, '.bouton-prec' ); }); 
    Mousetrap.bind('esc',  function(e) { navigate_to_page(e, '.bouton-accueil'); }); 
    Mousetrap.bind('right',  function(e) { navigate_to_page(e, '.bouton-suiv' ); }); 

    $('body').on('mousedown', function(e) { disable_swipe(e); }); 
    $('body').on('touchstart', function(e) { enable_swipe(e); }); 

    function disable_swipe(e) { 
     $('body').off('swiperight swipeleft'); 
    } 
    function enable_swipe(e) { 
     $('body').on('swiperight', function(e) { navigate_to_page(e, '.bouton-prec'); }); 
     $('body').on('swipeleft', function(e) { navigate_to_page(e, '.bouton-suiv'); }); 
    } 
    })(); 
});