&&&& $('#webchat_scroller').on('touchstart',function(e) {
&&& & var touch = e.originalEvent.targetTouches[0];
&&& & var y = touch.pageY;
&&&&& $('#webchat_scroller').on('touchmove',function(e) {
&&& & var touch = e.originalEvent.targetTouches[0];
&&& & var y = touch.pageY;
&&&& $('#webchat_scroller').on('touchend',function(e) {
var touch = e.originalEvent.changedTouches[0];
&&& & var y = touch.pageY;
阅读(...) 评论()2013年3月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？ - 知乎272被浏览42636分享邀请回答blog.youyo.name/archives/zepto-tap-click-through-research.html），现在最新版的已经修复了这个问题。在安卓4.1+的chrome浏览器上，如果在meta viewport中指定页面不可缩放，则click没有上述300ms左右的延迟9812 条评论分享收藏感谢收起window.scrollTo(0, 1);
刚开始我使用 touchend 替代 click，当触发 scrollTo 的同时，页面发生了跳转，开始我感到非常奇怪，为什么页面会跳转呢？最后，确认问题 scrollTo 动作是在 touchend 时触发，此时，并未触发click，在滚动回页面顶部时，click被触发，误中页面顶部的一个链接，导致页面发生跳转。事件触发顺序：touchend --& scrollTo(0, 1) --& click --& 点中页面顶部的链接跳转在大部分情况下，还是可以直接使用 touchend 替代，但是一定要如
答案中所说：在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值）且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的“click”，一般称它为“tap”Note：这个问题不是所有手机都会发生，目前，只在魅族MX2自带浏览器被验证，下面的截图是使用三星i9100示意。122 条评论分享收藏感谢收起查看更多回答1. 滚动 以下是三种实现方式： 1) 利用原生的css属性 overflow: scroll div id= parent style = overflow: divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现 2)js 编程实现 思路：对比手指在屏幕上移动前后位置变化改变内容元素content
　　1. 滚动
　　以下是三种实现方式：
　　1) 利用原生的css属性 overflow: scroll
&div&id="parent"&style="overflow:&
&&&&&div&id='content'&内容区域&/div&
　　Notice:
　　在android 有bug, 滚动完后会回退到最顶端的内容区域，解决办法是使用后两种方式实现
　　2)js 编程实现
　　思路：对比手指在屏幕上移动前后位置变化改变内容元素content的位置
　　第一步：设置parent的 overflow为hidden, 设置content的position为relative, top为0;
　　第二步：监听touch事件
var&parent&=&document.getElementById('parent');
parent.addEventListener('touchstart',&function(e)&{
&&&&//&do&touchstart
parent.addEventListener('touchmove',&function(e)&{
&&&&//&do&touchmove
parent.addEventListener('touchend',&function(e)&{
&&&&//&do&touchend
　　第三步：实现滚动代码
&*&这里只实现垂直滚动
var&parent&=&document.getElementById('parent');
var&content&=&document.getElementById('content')
var&startY&=&0;&//&初始位置
var&lastY&=&0;&//&上一次位置
parent.addEventListener('touchstart',&function(e)&{
&&&&lastY&=&startY&=&e.touches[0].pageY;
parent.addEventListener('touchmove',&function(e)&{
&&&&var&nowY&=&e.touches[0].pageY;
&&&&var&moveY&=&nowY&-&lastY;
&&&&var&contentTop&=&content.style.top.replace('px',&'');
&&&&//&设置top值移动content
&&&&content.style.top&=&(parseInt(contentTop)&+&moveY)&+&'px';
&&&&lastY&=&nowY;
parent.addEventListener('touchend',&function(e)&{
&&&&//&do&touchend
&&&&var&nowY&=&e.touches[0].pageY;
&&&&var&moveY&=&nowY&-&lastY;
&&&&var&contentTop&=&content.style.top.replace('px',&'');
&&&&//&设置top值移动content
&&&&content.style.top&=&(parseInt(contentTop)&+&moveY)&+&'px';
&&&&lastY&=&nowY;
　　第四步：优化
　　上边代码在手机上运行效果相对PC上要卡很多
　　优化部分请参见:
　　3) 使用iScroll4框架
　　var scroll = new iScroll('parent', {
　　hScrollbar: false,
　　vScrollbar: true,
　　checkDOMChanges : true
　　框架官网：http://cubiq.org/iscroll-4
　　2.惯性缓动
　　思路：取手指最后一段时间在屏幕上划动的平均速度v，让v按一个递减函数变化，直到不能移动或v&=0
&*&这里只实现垂直滚动
var&parent&=&document.getElementById('parent');
var&content&=&document.getElementById('content')
var&startY&=&0;&//&初始位置
var&lastY&=&0;&//&上一次位置
&*&用于缓动的变量
var&lastMoveTime&=&0;
var&lastMoveStart&=&0;
var&stopInertiaMove&=&false;&//&是否停止缓动
parent.addEventListener('touchstart',&function(e)&{
&&&&lastY&=&startY&=&e.touches[0].pageY;
&&&&&*&缓动代码
&&&&lastMoveStart&=&lastY;
&&&&lastMoveTime&=&e.timeStamp&||&Date.now();
&&&&stopInertiaMove&=&true;
parent.addEventListener('touchmove',&function(e)&{
&&&&var&nowY&=&e.touches[0].pageY;
&&&&var&moveY&=&nowY&-&lastY;
&&&&var&contentTop&=&content.style.top.replace('px',&'');
&&&&//&设置top值移动content
&&&&content.style.top&=&(parseInt(contentTop)&+&moveY)&+&'px';
&&&&lastY&=&nowY;
&&&&&*&缓动代码
&&&&var&nowTime&=&e.timeStamp&||&Date.now();
&&&&stopInertiaMove&=&true;
&&&&if(nowTime&-&lastMoveTime&&&300)&{
&&&&&&&&lastMoveTime&=&nowT
&&&&&&&&lastMoveStart&=&nowY;
parent.addEventListener('touchend',&function(e)&{
&&&&//&do&touchend
&&&&var&nowY&=&e.touches[0].pageY;
&&&&var&moveY&=&nowY&-&lastY;
&&&&var&contentTop&=&content.style.top.replace('px',&'');
&&&&var&contentY&=&(parseInt(contentTop)&+&moveY);
&&&&//&设置top值移动content
&&&&content.style.top&=&&contentY&+&'px';
&&&&lastY&=&nowY;
&&&&&*&缓动代码
&&&&var&nowTime&=&e.timeStamp&||&Date.now();
&&&&var&v&=&(nowY&-&lastMoveStart)&/&(nowTime&-&lastMoveTime);&//最后一段时间手指划动速度
&&&&stopInertiaMove&=&false;
&&&&(function(v,&startTime,&contentY)&{
&&&&&&&&var&dir&=&v&&&0&?&-1&:&1;&//加速度方向
&&&&&&&&var&deceleration&=&dir*0.0006;
&&&&&&&&var&duration&=&v&/&&//&速度消减至0所需时间
&&&&&&&&var&dist&=&v&*&duration&/&2;&//最终移动多少
&&&&&&&&function&inertiaMove()&{
&&&&&&&&&&&&if(stopInertiaMove)&return;
&&&&&&&&&&&&var&nowTime&=&e.timeStamp&||&Date.now();
&&&&&&&&&&&&var&t&=&nowTime-startT
&&&&&&&&&&&&var&nowV&=&v&+&t*
&&&&&&&&&&&&//&速度方向变化表示速度达到0了
&&&&&&&&&&&&if(dir*nowV&&&0)&{
&&&&&&&&&&&&&&&&return;
&&&&&&&&&&&&}
&&&&&&&&&&&&var&moveY&=&(v&+&nowV)/2&*&t;
&&&&&&&&&&&&content.style.top&=&(contentY&+&moveY)&+&"px";
&&&&&&&&&&&&setTimeout(inertiaMove,&10);
&&&&&&&&inertiaMove();
&&&&})(v,&nowTime,&contentY);
　　本文来自zzm_justin的博客，原文地址：
阅读(...) 评论()