jQuery Mobile 滑动手势仅适用于触摸屏，不适用于鼠标

Question

我正在使用 jQuery Mobile 允许触摸屏用户通过向左滑动和向右滑动手势在网站中来回导航。问题是 swipeleft 和 swiperight 事件也是用普通鼠标触发的，这很烦人，因为它发生在用户用鼠标选择一些文本时。

您可以在网站本身 (http://laetitia-stucki.ch/) 和下面的 JavaScript sn-p 上看到问题。

您知道如何仅使用触摸设备而不是普通鼠标触发滑动事件吗？

"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

感谢 Gjermund Dahl 的回答。我按照你的链接找到了另一个有趣的链接http://www.stucox.com/blog/you-cant-detect-a-touchscreen/，最后设法找到了解决方案。想法是在触发mousedown 事件时禁用swipe 事件，并在触发touchstart 事件时再次启用它。我在下面发布我的解决方案。如您所见，jQuery Mobile 和 Mousetrap 库可以一起工作。

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