Я создаю страницу, которая будет использоваться на ноутбуках и iPad. Таким образом, большая часть кода (это перетаскивание) дублируется в событиях мыши и сенсорных событиях. Но теперь я нахожу действительно странное поведение: при использовании на ноутбуке все в порядке, но при использовании на iPad периодически touchEnd запускает mouseUp ... и поскольку общая цель страницы - последовательность событий, это сбивает все с толку (шаг 'n' был достигнут, но затем функция mouseUp повторно проверяет его, и, поскольку это уже сделано, происходит сбой)
Потребовалось довольно много времени, чтобы понять это (поскольку я не думал, что это возможно), но, помещая уникальные сообщения журнала в разные версии, я вижу, что в моих журналах на iPad я получаю ошибку мыши сообщение.
Поскольку такое поведение между событиями не логично для меня, я не уверен, как продолжить отладку, поэтому буду признателен за любой совет, который кто-либо может дать. Вот основные части кода, сопровождаемые примером журнала ИЗ IPAD. Еще раз спасибо.
function touchEnd(event)
{
console.log('touchEnd fired\n');
if (_dragElement != null)
{
if((ExtractNumber(_dragElement.style.left)<-30)&&(ExtractNumber(_dragElement.style.top)<200)&&(event.touches.length==0)){
console.log(_dragElement.id+' in hand\n');
if(process[correct].indexOf(_dragElement.id)>=0){
console.log('--CORRECT--\n');
hide(_dragElement.id);
//hide('hand');
correct++;
document.getElementById('speech').innerHTML=phrases[correct];
_dragElement = null;
return false;
}
else{
console.log('--WRONG--\n');
document.getElementById(_dragElement.id).style.top = document.getElementById(_dragElement.id).defaultTop+'px';
document.getElementById(_dragElement.id).style.left = document.getElementById(_dragElement.id).defaultLeft+'px';
mistakeCounter++;
if(mistakeCounter==10){
console.log('ejection\n');
ejection();
}
else if(mistakeCounter==9){
document.getElementById('speech').innerHTML='If you do that again I\'ll have to ask you to leave';
console.log('warning text\n');
}
else if(mistakeCounter<9&&mistakeCounter>5){
document.getElementById('speech').innerHTML=bigMistakes[Math.floor(Math.random()*bigMistakes.length)];
console.log('big mistake text\n');
}
else{
document.getElementById('speech').innerHTML=mistakes[Math.floor(Math.random()*mistakes.length)];
console.log('mistake text\n');
}
_dragElement = null;
}
}
}
//interactions();
}
function OnMouseUp(e)
{
if (_dragElement != null)
{
_dragElement.style.zIndex = _oldZIndex;
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
_dragElement = null;
for(i=0;i<tools.length;i++){
if((ExtractNumber(document.getElementById(tools[i].id).style.left)<-30)&&(ExtractNumber(document.getElementById(tools[i].id).style.top)<200)&&(ExtractNumber(document.getElementById(tools[i].id).style.top)>-800)&&(ExtractNumber(document.getElementById(tools[i].id).style.left)>-800)){
if(process[correct].indexOf(tools[i].id)>=0){
hide(tools[i].id);
//hide('hand');
correct++;
document.getElementById('speech').innerHTML=phrases[correct];
}
else{
document.getElementById(tools[i].id).style.top = document.getElementById(tools[i].id).defaultTop+'px';
document.getElementById(tools[i].id).style.left = document.getElementById(tools[i].id).defaultLeft+'px';
mistakeCounter++;
if(mistakeCounter==10){
console.log('mouse ejection\n');
ejection();
}
else if(mistakeCounter==9){
console.log('mouse warning text\n');
document.getElementById('speech').innerHTML='If you do that again I\'ll have to ask you to leave';
}
else if(9>mistakeCounter&&mistakeCounter>5){
console.log('mouse big mistake text\n');
document.getElementById('speech').innerHTML=bigMistakes[Math.floor(Math.random()*bigMistakes.length)];
}
else{
console.log('mouse mistake text\n');
document.getElementById('speech').innerHTML=mistakes[Math.floor(Math.random()*mistakes.length)];
}
}
}
}
}
//check positions
//interactions();
}
.log:
touchEnd fired
safetyAwl in hand
--CORRECT--
touchEnd fired
curvedProbe in hand
--CORRECT--
touchEnd fired
tap55 in hand
--CORRECT--
mouse mistake text