Question

我正在构建一个将在笔记本电脑和iPad上使用的页面。因此，大多数代码（它的拖放都很重）在鼠标事件和触摸事件中都是重复的。但是现在我发现了一个非常奇怪的行为：当在笔记本电脑上使用时，一切都很好，但是当在iPad上使用时，定期触摸并触发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

无需添加设备特定条件来处理此问题。如果浏览器由于单个用户输入而触发了触摸和鼠标事件，并且如果您想停止触发鼠标事件，请在touchevent处理程序中调用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'‌)))

虽然有效，但我仍然觉得它试图解雇所以我很怀疑这是最好的答案

touchEnd和onMouseUp同时从iPad开火

2 个答案: