2011-07-01 31 views
0

我正在構建一個將用於筆記本電腦和iPad的頁面。因此,大部分代碼(拖/放)都會在鼠標事件和觸摸事件中複製。但是現在我發現了一個非常奇怪的行爲:在筆記本電腦上使用時,一切都很好,但是在iPad上使用時,定期touchEnd觸發mouseUp ...並且由於頁面的總體目標是一系列事件,這導致整個事情偏離軌道(步驟'n'已經實現,但是然後mouseUp函數重新測試它,並且因爲它已經完成,所以失敗了)touchEnd和onMouseUp從iPad發射

花了很長時間才弄清楚了(因爲我沒想到這是可能的),但通過在不同版本中添加獨特的日誌消息,我可以看到在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 

回答

0

我通過改變第一OnMouseUp '解決' 這個if語句來測試它是否是一個iOS設備:

if ((_dragElement != null)&&(!navigator.userAgent.match('iPad'))&&(!navigator.userAgent.match('iPhone'‌​)))

和而作品,它對我來說似乎很奇怪,它試圖開火,所以我懷疑這是最佳答案