如何在jQuery Mobile中定义一个不可擦拭的区域？

Question

我想只对绿色标记的区域激活 "swiperight "功能，可以定义一个不可擦拭的区域吗？

Answer 1

要实现您的要求，有多种可能的解决方案。

该 swipe, swipeleft 和 swiperight 是自定义的jQuery Mobile事件。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 */

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