touchEnd和onMouseUp都从iPad上启动

touchEnd and onMouseUp BOTH firing from iPad

本文关键字:启动 iPad 都从 onMouseUp touchEnd      更新时间:2023-09-26

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

无需添加设备特定条件即可处理此问题。如果浏览器由于单个用户输入而同时触发触摸和鼠标事件,并且您希望停止触发鼠标事件,请在触摸事件处理程序内调用preventDefault((以避免鼠标事件。

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

我通过更改第一个OnMouseUp-if语句来测试它是否是iOS设备来"解决"这个问题:

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

虽然这是有效的,但它试图开火对我来说仍然很奇怪,所以我怀疑这是否是

的最佳答案