Javascript touchend事件不存在'；我不能在安卓上工作

我刚刚开始考虑在android上进行一些基本的移动web开发，并编写一个测试脚本来调查触摸事件。我在android emulator中运行了以下代码，touchend事件从未被触发。谁能告诉我为什么

我试过三个版本的仿真器（1.6、2.1和2.2），这三个版本的行为都是一样的

提前谢谢你能给我的任何帮助

干杯， 科尔姆

编辑-我也尝试过使用XUI框架，但也有同样的问题，所以我猜我对这些东西的工作原理有一个基本的误解

地图测试

window.onload=函数（）{
document.body.appendChild(
document.createTextNode（“w:+screen.width+“x”+“h:+screen.height”）
);
附件touchevents（）；
}
函数attachTouchEvents（）{
控制台=document.getElementById（“控制台”）；
var map=document.getElementById（“map”）；
map.addEventListener（'touchstart'，函数（事件）{
event.preventDefault（）；
var touch=event.touch[0]；
document.getElementById（“touchCoord”）.innerHTML=“S:”+touch.pageX+“”+touch.pageY；
document.getElementById（“touchEvent”）.innerHTML=“Touch Start”；
}，假）；
map.addEventListener（'touchmove'，函数（事件）{
event.preventDefault（）；
var touch=event.touch[0]；
document.getElementById（“touchCoord”）.innerHTML=“M:”+touch.pageX+”+touch.pageY；
document.getElementById（“touchEvent”）.innerHTML=“触摸移动”；
}，假）；
map.addEventListener（'touchend'，函数（事件）{
var touch=event.touch[0]；
document.getElementById（“touchCoord”）.innerHTML=“E:”+touch.pageX+”+touch.pageY；
document.getElementById（“touchEvent”）.innerHTML=“Touch End”；
event.preventDefault（）；
}，假）；
console.innerHTML=“附加事件”；
}
html，正文{
身高：100%；
宽度：100%；
保证金：0；
背景色：红色；
}
#地图{
高度：300px；
宽度：300px；
背景颜色：黄色；
}
触摸坐标
触摸Evnt
安慰

---

这是网络开发，所以我正在构建一个可以利用触摸事件的网页

我知道问题出在哪里了

---

当触发

touchend

事件时，

event.touchs[]

数组为空，因此引发Javascript错误。事件被触发，但它没有打印任何内容，因为我试图访问未定义的数据。emulator浏览器似乎没有我找到的任何Javascript调试工具，甚至没有告诉我什么时候发生了Javascript错误，所以我花了一段时间才弄清楚。

触发touchend事件时，TouchList始终为空，因为您从屏幕上删除了所有手指：）

---

这就是正确使用它的方法。当手指指向屏幕时，捕捉起始x，y。随着手指的移动，touchmove事件将更新结束的x，y。完成后，touchend将启动——但是是的，它没有touch数组，因此会出现javascript错误。这就是为什么我们只使用它来捕捉这是一个结束的任务（手指离开屏幕），然后对它做出反应。（在这种情况下，我会发送一个信息性警报。）

---

对于试图找出Android v3和v4（也可能是v2.3）上缺少touchend事件的原因的人来说，有一个长期未解决的bug，它只在v4.1中得到修复（显然）：

---

要解决此错误，您必须在touchstart或first touchmove事件上调用

preventDefault（）

。当然，这会阻止本机滚动，因此您需要自己重新实现。

这发生在KitKat上，通过根据android开发人员处理touchcancel来解决

---

对于较旧的android版本，如果touchstart事件未应用preventdefault，则该问题是由android禁止将触摸事件传递到webview引起的。这被硬编码到数以百万计的android设备中

我能够通过从包含WebView的活动中手动触发

ACTION\u UP

motion事件来解决问题，如下所示：

//onCreate method
webView.setOnTouchListener(new View.OnTouchListener() 
{
   @Override
   public boolean onTouch(View view, MotionEvent motionEvent) 
   {
      if(motionEvent.getAction() == MotionEvent.ACTION_UP) 
      {
         webView.loadUrl("javascript:document.dispatchEvent(new CustomEvent('touchend'))");
      }
      return false;
   }
});

---

我也遇到了同样的问题，另外绑定“touchcancel”事件解决了这个问题。进行了一些测试，当没有触发“touchend”时，会触发“touchcancel”事件

var onTouchEnd = function(){
  console.log("touch end");
}
document.addEventListener("touchend", onTouchEnd);
document.addEventListener("touchcancel", onTouchEnd);

---

这里有一个保持启用滚动的解决方案：

在touchMove处理程序中添加一个

preventDefault（）

，但将其包装在检查横向滚动移动的条件中：

onTouchStart = function (e) {                // Save start position
  startX = e.originalEvent.touches[0].pageX;
  startY = e.originalEvent.touches[0].pageY;
}

onTouchMove = function (e) {
  currentX = e.originalEvent.touches[0].pageX;
  currentY = e.originalEvent.touches[0].pageY;
  translateY = Math.abs(currentY - startY);
  if (translateY < 10) {   // If we are not (yet) scrolling vertically:
    e.preventDefault()
  }
}

onTouchStart=函数（e）{//保存开始位置
startX=e.originalEvent.touchs[0].pageX；
startY=e.originalEvent.touchs[0].pageY；
}
onTouchMove=函数（e）{
currentX=e.originalEvent.touchs[0].pageX；
currentY=e.originalEvent.touchs[0].pageY；
translateY=Math.abs（currentY-startY）；
如果（translateY<10）{//如果我们（尚未）垂直滚动：
e、 预防默认值（）
}
}

我不确定您是如何做到这一点的。当你说你已经用模拟器试过了，你是什么意思？您是否正在运行Android应用程序（例如使用各种

视图的
活动
），或者您是否正在使用Android浏览器访问网页？如果您正在编写实际的Android应用程序，请注意
WebView
不能很好地处理
onTouchEvent
回调。它的内置系统可以在比屏幕更大的页面上平移
//onCreate method
webView.setOnTouchListener(new View.OnTouchListener() 
{
   @Override
   public boolean onTouch(View view, MotionEvent motionEvent) 
   {
      if(motionEvent.getAction() == MotionEvent.ACTION_UP) 
      {
         webView.loadUrl("javascript:document.dispatchEvent(new CustomEvent('touchend'))");
      }
      return false;
   }
});

var onTouchEnd = function(){
  console.log("touch end");
}
document.addEventListener("touchend", onTouchEnd);
document.addEventListener("touchcancel", onTouchEnd);

onTouchStart = function (e) {                // Save start position
  startX = e.originalEvent.touches[0].pageX;
  startY = e.originalEvent.touches[0].pageY;
}

onTouchMove = function (e) {
  currentX = e.originalEvent.touches[0].pageX;
  currentY = e.originalEvent.touches[0].pageY;
  translateY = Math.abs(currentY - startY);
  if (translateY < 10) {   // If we are not (yet) scrolling vertically:
    e.preventDefault()
  }
}