为什么移动端touch时间不能用browsersync同步？
来源：2-4 多终端同步工具Browsersync
fangfangfang2019
2019-07-29 16:18:15
试了一下，click事件在移动端和浏览器操作都能同步，console也能正确打印，但是touch事件不能同步，移动端操作也不能打印到浏览器console，代码如下：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<style>
.mydiv {
background-color: yellow;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
}
</style>
<body>
<div class="mydiv" id="mydiv"></div>
<script type="text/javascript">
mydiv = document.getElementById('mydiv');
mydiv.addEventListener('touchstart', function (event) {
var touch = event.changedTouches[0];
mydiv.style.backgroundColor = 'red'
console.log('touchstart', touch.pageX, touch.pageY);
});
mydiv.addEventListener('touchmove', function (event) {
var touch = event.changedTouches[0];
mydiv.style.backgroundColor = 'green'
console.log('touchmove', touch.pageX, touch.pageY);
});
mydiv.addEventListener('touchend', function (event) {
var touch = event.changedTouches[0];
mydiv.style.backgroundColor = 'yellow'
console.log('touchend', touch.pageX, touch.pageY);
});
mydiv.addEventListener('click', function (event) {
//var touch = event.changedTouches[0];
mydiv.style.top = '0';
mydiv.style.left = '0';
console.log(mydiv.style);
});
</script>
</body>
</html>
浏览器操作touch，移动端不能同步：
移动端操作touch，浏览器不能同步且不能打印console：
1回答
-
好帮手慕慕子
2019-07-29
同学你好， pc端的touch事件和移动端的touch事件存在兼容性问题， 所以无法同步。
建议：同学可以引入zepto.js, 使用这个库封装好的触摸事件测试一下哦。 关于zepto这个库，在后面的章节会有详细的讲解哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~~
0
相似问题