touchEnd 和 onMouseUp 均从 iPad 触发

发布于 11-18 12:04 字数 4812 浏览 2 评论 0原文

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

I'm building a page that will be used on laptops and iPads. So, the majority of the code (it's drag/drop heavy) is duplicated across mouse events and touch events. But now I'm finding a really strange behavior: when used on a laptop, everything is fine, but when used on an iPad, periodically the touchEnd fires mouseUp...and because the overall goal of the page is a sequence of events, this throws the whole thing off track (step 'n' was achieved, but then the mouseUp function re-tests for it, and since it's already done, that fails)

It took quite awhile to figure that out (since I didn't think it was possible) but by putting unique log message in the different versions, I can see that in my logs on the iPad, I get a 'mouse mistake' message.

Because this cross event behavior isn't logical to me I'm not sure how to continue debugging, so would appreciate whatever advice anyone can give. Here are the primary pieces of code, followed by a sample log FROM THE IPAD. Thanks again.

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();
}

log:

touchEnd fired
safetyAwl in hand
--CORRECT--
touchEnd fired
curvedProbe in hand
--CORRECT--
touchEnd fired
tap55 in hand
--CORRECT--
mouse mistake text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

妥活2024-11-25 12:04:15

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

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

No need to add device specific conditions to handle this.
If the browser fires both touch and mouse events because of a single user input and if you want to stop firing mouse events, call preventDefault() inside touchevent handler to avoid mouse events.

function process_touchend(e) {
  // Call preventDefault() to prevent any further handling
  e.preventDefault();
}
梦在深巷2024-11-25 12:04:15

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

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

虽然这有效,但它试图触发对我来说仍然很奇怪,所以我对此表示怀疑这是最好的答案

I 'solved' this by changing the first OnMouseUp if statement to test whether it was an iOS device:

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

and while that works, it still seems strange to me that it tries to fire so I'm skeptical that is the BEST answer

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文