【前端】微信浏览器触摸事件流程

目前只在微信浏览器测试了，iOS无问题，部分Android有下面这个问题

正常在微信浏览器里面点击的时候会触发 touchstart -> touchend
滑动的时候会触发 touchstart -> touchmove -> touchend

但是当我在touchstart中调用了preventDefault时，点击的流程很大概率（不是100%）会变成 touchstart -> touchmove -> touchend，这是为什么？
麻烦熟悉浏览器内核QQ靓号地图代码的高手帮忙解释下，跪谢 ORZ

demo

源码

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0,width=device-width,maximum-scale=1.0, user-scalable=0,minimum-scale=1.0"/><title>demo</title><style>html, body {height: 100%;margin: 0;padding: 0;
}</style></head><body><div id="demo"><div>slider1</div><div id="log"></div></div><script>var $log = document.querySelector('#log');var log = function(str) {var $l = document.createElement('p');
$l.innerText = str;
$log.children.length
? $log.insertBefore($l, $log.children[0])
: $log.appendChild($l);
};var $demo = document.querySelector('#demo');
$demo.addEventListener('touchstart', function(e) {
log('touchstart');// 可以将下面代码注释掉看看e.preventDefault();
});
$demo.addEventListener('touchmove', function() {
log('touchmove');
});
$demo.addEventListener('touchend', function() {
log('touchend');
});
$demo.addEventListener('click', function() {
log('click');
});</script></body></html>

回答

在touchmove中添加e.preventDefault(),将浏览器默认的滑动惯性去掉

更多相关文章

随机推荐