touchEnd和onMouseUp都从iPad上启动
touchEnd and onMouseUp BOTH firing from 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
无需添加设备特定条件即可处理此问题。如果浏览器由于单个用户输入而同时触发触摸和鼠标事件,并且您希望停止触发鼠标事件,请在触摸事件处理程序内调用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')))
虽然这是有效的,但它试图开火对我来说仍然很奇怪,所以我怀疑这是否是
相关文章:
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 我的jQuery插件参数没有正确启动,遇到了问题
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 对iPad上的点击事件反应缓慢
- 从控制器返回后Ajax启动事件激发
- Meteor上的启动页面
- 如何防止网页加载后自动启动功能
- 如何从JavaScriptInterface启动Navigation Drawer
- window.on.scroll事件未启动
- 单击按钮后启动javascript提示
- 在javaservlet doPost方法中启动线程时,无法返回异常消息
- spine.js在启动时填充模型实例
- jQuery(this).Pparent().Pparente().Prent().find()在iPad上不起作用
- 如何在所有ng点击事件AngularJS上启动一个方法
- mootools点击:继电器没有在ipad/iphone上启动
- iPad触摸启动启动两次
- 加载和播放播放列表.m3u8在iPad上的特定时间启动
- Phonegap iPad应用程序启动/启动屏幕切换在devicereready
- touchEnd和onMouseUp都从iPad上启动
- 获取Ipad触摸启动坐标