ラップトップと 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();
}
ログ：
touchEnd fired
safetyAwl in hand
--CORRECT--
touchEnd fired
curvedProbe in hand
--CORRECT--
touchEnd fired
tap55 in hand
--CORRECT--
mouse mistake text