touchEnd 和 onMouseUp 均从 iPad 触发
我正在构建一个将在笔记本电脑和 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 技术交流群。
发布评论
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
无需添加设备特定条件来处理此问题。
如果浏览器由于单个用户输入而同时触发触摸和鼠标事件,并且您想停止触发鼠标事件,请在 touchevent 处理程序中调用 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.