更新

Question

嗯，这将是一个艰难的。我想我已经筋疲力尽了所有的选择，让我们看看你是否能想出更好的东西。

我有一个水平旋转木马，我正在使用touchstart，touchmove，touchend来控制它。为了这个例子，html结构类似于：

<div>
   <ul id="strip">
     <li><a>...</a></li>
     <li><a>...</a></li>
     ...................
   </ul>
</div>

我已经将我的事件处理程序分开，从鼠标到触摸事件的行为有点不同，因此，只考虑触摸，我有：

var strip = document.getElementById('strip');
strip.addEventListener('touchstart', touchStartHandler);
document.addEventListener('touchmove', touchMoveHandler);
document.addEventListener('touchend', touchEndHandler);

即使用户的手指在我的条带外面，我希望水平滚动也能正常工作，所以我将touchmove和touchend事件附加到文档中。

起初，我认为当用户滚动我的旋转木马时，浏览器保持不变是很自然的，所以我的touchMoveHandler看起来像是：

function touchMoveHandler(evt){
   evt.preventDefault();
   ...................
}

...这样，当用户的手指在Y轴上变化时，浏览器不会垂直平移。我们的可用性人，不这么认为，我现在真的同意他的看法。他希望浏览器能够正常响应，除非手指的移动完全或接近完全水平。无论如何，这可能是太多的信息，所以我现在要详细说明我的实际问题。这是我正在研究的原型的片段作为概念证明：

var stopY, lastTime, newTime;

var touchStartHandler(evt){
   ...
   stopY = true;
   lastTime = new Date();
   ...
};
var touchMoveHandler(evt){
   ...
   //this following code works like a setInterval, it turns stopY on and off every 1/2 sec
   //for some reason, setInterval doesn't play well inside a touchmove event
   newTime = new Date();
   if(newTime - lastTime >= 500){
      stopY = !stopY;
      lastTime = newTime;
   }
   ...
   if(stopY){
      evt.preventDefault();
   }
   ...
}

我绝对相信这段代码是原始的，我用控制台日志调试它，一切都在做它应该做的事情，除了通过stopY变量浏览器平移的通勤。如果我运行以stopY = true开头的代码，则没有浏览器平移，如果我以stopY = false开头，浏览器按预期平移。问题是，我希望这种行为每半秒改变一次，但事实并非如此。

我希望我没有为你太复杂，但这是非常具体的。

感谢您的时间和帮助

更新

您可以尝试以下链接（在Ipad或Iphone上）：
http://andrepadez.com/ipadtouch
http://andrepadez.com/ipadtouch?stopy=false

使用视图源，查看整个代码

Answer 1

你能试试stopY = !stopY;吗？

<强>更新

执行preventDefault()后，在touchend触发或启用之前，滚动将无法返回。以下内容可能会为您提供所需的行为：

if(stopY){ return false; }
else { return true; }

或简单起见return !stopY; ...

在Apple Ipad的Safari上控制事件

更新

1 个答案: