Pro*_*tos 32 javascript events android touch
我刚刚开始考虑在android上做一些基本的移动web开发,并编写一个测试脚本来调查触摸事件.我在android模拟器中运行以下代码,并且touchend事件永远不会被触发.谁能告诉我为什么？
我已经尝试了三个版本的模拟器(1.6,2.1和2.2),并且所有三个版本都以相同的方式运行.
在此先感谢您提供给我的任何帮助.
干杯,科尔姆
编辑 - 我也尝试使用XUI框架并遇到同样的问题所以我猜我对这些东西的工作原理有一个根本的误解......
地图测试
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="language" content="english" />
<meta name="viewport" content="minimum-scale=1.0,
width=device-width,
height=device-height,
user-scalable=no">
<script type="text/javascript">
window.onload = function(){
document.body.appendChild(
document.createTextNode("w: " + screen.width + " x " + "h : " +screen.height)
);
attachTouchEvents();
}
function attachTouchEvents() {
console = document.getElementById("console");
var map = document.getElementById("map");
map.addEventListener ('touchstart', function (event) {
event.preventDefault();
var touch = event.touches[0];
document.getElementById("touchCoord").innerHTML = "S : " + touch.pageX + " " + touch.pageY;
document.getElementById("touchEvent").innerHTML = "Touch Start";
}, false);
map.addEventListener ('touchmove', function (event) {
event.preventDefault();
var touch = event.touches[0];
document.getElementById("touchCoord").innerHTML = "M : " + touch.pageX + " " + touch.pageY;
document.getElementById("touchEvent").innerHTML = "Touch Move";
}, false);
map.addEventListener ('touchend', function (event) {
var touch = event.touches[0];
document.getElementById("touchCoord").innerHTML = "E : " + touch.pageX + " " + touch.pageY;
document.getElementById("touchEvent").innerHTML = "Touch End";
event.preventDefault();
}, false);
console.innerHTML = "event attached";
}
</script>
<style type="text/css">
html, body {
height:100%;
width:100%;
margin: 0;
background-color:red;
}
#map {
height: 300px;
width: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="touchCoord">Touch Coords</div>
<div id="touchEvent">Touch Evnt</div>
<div id="console">Console</div>
</body>
Sys*_*dox 31
对于任何想要弄清楚为什么在Android v3和v4(也许还有v2.3)上缺少touchend事件的人来说,有一个很长的未解决的bug,只是在v4.1中修复了(显然):
http://code.google.com/p/android/issues/detail?id=4549
http://code.google.com/p/android/issues/detail?id=19827
要解决此错误,您必须调用preventDefault()touchstart或first touchmove事件.当然,这会阻止本机滚动,因此您需要自己重新实现.
Vol*_*ike 21
这就是您需要正确使用它的方法.当手指进入屏幕时,您捕获起始x,y.当手指移过时,touchmove事件更新结尾x,y.完成后,touchend会触发 - 但是,它没有触摸数组,因此出现了javascript错误.这就是为什么我们只使用它来捕获这是一个结束任务(手指离开屏幕)然后对它做出反应.(在这种情况下,我会发送信息提醒.)
var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;
window.addEventListener('touchstart',function(event) {
gnStartX = event.touches[0].pageX;
gnStartY = event.touches[0].pageY;
},false);
window.addEventListener('touchmove',function(event) {
gnEndX = event.touches[0].pageX;
gnEndY = event.touches[0].pageY;
},false);
window.addEventListener('touchend',function(event) {
alert('START (' + gnStartX + ', ' + gnStartY + ') END (' + gnEndX + ', ' + gnEndY + ')');
},false);
这是网络开发,所以我正在构建一个可以利用触摸事件的网页.
我弄清楚问题是什么.
当touchend事件被触发时,event.touches[]数组为空,因此抛出了Javascript错误.该事件被解雇,但它没有打印任何内容,因为我试图访问未定义的数据.模拟器浏览器似乎没有我找到的任何Javascript调试工具,甚至没有告诉我何时发生Javascript错误,所以我花了一段时间才弄明白.
| 归档时间： |
|
| 查看次数： |
56109 次 |
| 最近记录： |