目前只在微信浏览器测试了,iOS无问题,部分Android有下面这个问题
正常在微信浏览器里面点击的时候会触发 touchstart -> touchend
滑动的时候会触发 touchstart -> touchmove -> touchend
但是当我在touchstart中调用了preventDefault时,点击的流程很大概率(不是100%)会变成 touchstart -> touchmove -> touchend,这是为什么?
麻烦熟悉浏览器内核代码的高手帮忙解释下,跪谢 ORZ
源码
<!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 style="height: 200px; background-color: #cd4b42;">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>
https://www.zhihu.com/questio...
在
touchmove
中添加e.preventDefault()
,将浏览器默认的滑动惯性去掉