移动web开发之touch事件实例详解(2)

日期：2020-05-11 栏目：程序人生浏览：次

300ms

300ms问题是指在某个元素执行它的功能和执行touch事件之间有一个300毫秒的间隔。鼠标事件、焦点事件、浏览器默认行为等相较于touch事件，都存在着300ms的延迟

【点透】

因为300ms的存在，会造成常见的点透问题。先来看例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  #test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
 </style>
</head>
<body>
 <a href="https://baidu.com">百度</a>
 <div id="test"></div>
 <script>
  (function () {
   var
    elesMap = {
     touchObj: document.getElementById('test')
    },
    fnHide, onTouch;
   fnHide = function (type) {
    elesMap.touchObj.style.display = 'none';
   };
   onTouch = function (event) {
    fnHide();
   };
   elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);});
  })(); 
 </script>
</body>
</html>

浅蓝色的半透明div被点击(触发touch事件)后，如果点击位置正好位于链接的上方，则会触发链接跳转的默认行为。详细解释是，点击页面后，浏览器会记录所点击的页面坐标，300ms后，在该坐标找到元素。在该元素上触发点击行为。因此，如果300ms内同一页面坐标的上层元素消失后，300ms后在下层元素上触发点击行为。这就造成了点透问题

造成这个问题，是因为触摸屏幕的行为被重载(overload)了。在手指触摸屏幕的瞬间，浏览器无法预知用户是在轻触(Tap)、双触(Double-Tap)、滑动(Swipe)、按住不放(Hold)还是其他什么操作。唯一保险的做法就是等上一会儿看接下来会发生什么

问题是在于双触(Double-Tap)。即便是浏览器检测出手指离开了屏幕，它仍然无法判断接下来做什么。因为浏览器无法知道手指是会再次回到屏幕，还是就此结束触发轻触事件以及事件级联。为了确定这一点，浏览器不得不等待一小段时间。浏览器开发者找到一个最佳时间间隔，就是300毫秒

【解决办法】

1、在touch事件的事件处理程序中增加300ms的延迟

(function () {
   var
    elesMap = {
     touchObj: document.getElementById('test')
    },
    fnHide, onTouch;
   fnHide = function (type) {
    elesMap.touchObj.style.display = 'none';
   };
   onTouch = function (event) {
    setTimeout(function(){
     fnHide();
    },300);
   };
   elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
  })();

转载注明出处：http://www.heiqu.com/476.html

移动web开发之touch事件实例详解(2)

相关推荐