Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

touchmove事件只触发一次的问题

  在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造成的,在其它系统上没有这个情况。我们可以在touchstart事件中加入preventDefalut来解决,但这会带来其它问题。
<meta name="viewport" content="width=device-width,user-scalable=no" />
<input id="coords"></input>
<script>
document.addEventListener("touchmove",function(e){
  var p=e.touches[0];
  coords.value="("+p.clientX+","+p.clientY+")";
});
</script>
  这个代码在Android(4.0.3)下只有Firefox(24)可以正常工作,Chrome(29)、QQ(4.4)、UC(9.3),全都都只能触发一次touchmove。解决的方法是在touchstart时加上preventDefalut。
document.addEventListener("touchstart",function(e){
  e.preventDefault();
});
  加上这个代码后所有的浏览器都可以正常处理touchmove了,但是会出现其它问题。例如这个例子中有个INPUT:TEXT,如果把touchstart事件的默认动作给阻止了我们就无法选中这个控件,无法编辑这个文本控件里面的文字(有少数浏览器可以)。这只是一个例子而已,阻止了touchstart的默认动作会导致其它,CLICK事件不触发、超链接失效,等之类的问题。所以,我们除了阻止touchstart的默认动作之外还要对内部的一些特殊元素做处理。让那些特殊的元素上的事件不冒泡出去,以防止默认动作被阻止。
document.addEventListener("touchstart",function(e){
  /^(?:INPUT|TEXTAREA|A)$/.test(e.target.tagName)||e.preventDefault();
});
  只有触发对象不是这些特殊元素时才阻止默认事件,这样就能避免特殊元素无法实现默认行为。这里的INPUT、TEXTAREA、A,三个只是比较常用的需要默认行为的元素,如果有需要还得添加其它的。虽然可以解决问题,但是这么做也会导致其它问题。当触控从这些特殊元素上开始拖动时将和最初的结果一样touchmove无法正常工作。不过根据用户的操作习惯通常也不会在这些特殊元素上做拖拽,所以并不会造成太大影响。我目前就这么解决了,如果大家还有是更好的方法欢迎分享~
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^