我正在构建一个将在笔记本电脑和 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