控制Apple Ipad上的事件's Safari

Controlling events on Apple Ipad's Safari

本文关键字：Safari 事件 Apple Ipad 控制      更新时间：2023-09-26

好吧，这将是一场艰难的比赛。我想我已经用尽了所有的选择，让我们看看你是否能想出更好的办法。

我有一个水平旋转木马，使用touchstart、touchmove、touchend来控制它

<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

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

你能试试stopY = !stopY;吗？

更新

一旦执行preventDefault()，滚动将无法返回，直到touchend触发或启用它

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

或者为了简单起见，仅return !stopY;。。。

相关文章：