如何在 jQuery Mobile 中定义不可滑动区域？

Question

我只想为标记为绿色的区域激活 "swiperight" 功能。我可以定义一个不可滑动的区域吗？

Answer 1

有不止一种可能的解决方案来实现您的要求。

swipe、swipeleft 和 swiperight 是自定义 jQuery 移动事件。 JQM 将自定义结构附加到这些事件，其中包含原始触摸事件的开始和停止坐标。

首先，如果你想自己处理滑动，你需要告诉框架：

跳过内置面板滑动处理程序：

<div data-role="panel" id="myPanel" data-swipe-close="false">

之后，要打开或关闭 panel，您只需检查 touchstart、touchend 或两者的坐标（由您决定）。

触摸事件的自定义处理：

$('body').on('swiperight', function (e) {
  var startX = e.swipestart.coords[0],
    stopX = e.swipestop.coords[0];   
  if(startX < 100) {
    $('#myPanel').panel('open');
  } 
});

$('body').on('swipeleft', function (e) {
  var startX = e.swipestart.coords[0],
    stopX = e.swipestop.coords[0];   
  if(stopX < 100) {    
    $('#myPanel').panel('close');
  } 
});

如果你想要一个更系统的方法，你也可以检查一些相关的panel选项：

var data = $('#myPanel').data("mobile-panel"),
    display = data.options.display, /* Panel Type: reveal, push, overlay */
    position = data.options.position; /* Panel position: left, right */

并相应地微调滑动动作（或任何你想要的）。

如何在 jQuery Mobile 中定义不可滑动区域？

How to define a non-swipeable area in jQuery Mobile?

jquery-mobile