touchEnd 和 onMouseUp 都从 iPad 触发

Question

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

Answer 1

无需添加设备特定条件来处理此问题。 如果浏览器因为单个用户输入而触发了触摸和鼠标事件，并且如果您想停止触发鼠标事件，请在触摸事件处理程序中调用 preventDefault() 以避免鼠标事件。

function process_touchend(e) {
  // Call preventDefault() to prevent any further handling
  e.preventDefault();
}

Answer 2

我通过更改第一个 OnMouseUp if 语句来测试它是否是 iOS 设备，“解决了”这个问题：

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

虽然这有效，但它试图开火对我来说仍然很奇怪，所以我怀疑这是最好的答案