ну, это будет тяжело.Я думаю, что я исчерпал все свои варианты, давайте посмотрим, сможете ли вы придумать что-нибудь получше.
У меня горизонтальная карусель, и я использую 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
использовать вид источника, чтобы увидеть весь код