阻止浏览器默认行为

移动端浏览器那些默认行为影响我们的开发 ?

• 上下滑动时空白
• 长按选中文字和图片

一段代码，阻止所有浏览器默认行为

document.addEventListener("touchstart",function(ev){
  if(ev.defaultPrevented) {
    ev.preventDefault();
  }
});

/* 为提高性能，chrome56之后， window docuemnt body 触屏事件默认无法取消默认事件， 需要给 addEventListener() 指定第三个参数 */
document.addEventListener("touchstart",function(ev){
 ev.preventDefault();
}, {passive: false});


/* ----- ------------------------------------------------------------*/
/* 或者给最外城的包裹元素 绑定touchstart事件 并阻止默认行为；/ */
document.addEventListener("touchstart",function(ev){
 ev.preventDefault();
});

html,body {
  width: 100%;
  height: 100%;
}
#wrap {
  width: 100%;
  height: 100%;
}

这段代码产生的影响 :

• 上下滑动时无空白
• 长按不选中文字和图片
• 解决了点击穿透问题
• IOS上的Safari浏览器禁止用户缩放
• 滚动条失效
• 超链接失效
• 会让 input 无法获取焦点

解决超链接失效问题

links = document.querySelectorAll('a[href]');
links.forEach(function(link){
  link.addEventListener('touchend', function(event) {
    location.href = link.href;
  });
})

解决 input 获取焦点

input.addEventListener('touchstart', function(event){
  event.stopPropagation();
})

解决部分文字想要被选中

content = document.querySelector('#content');
content.addEventListener('touchstart', function(event) {
  console.log('ok');
  event.stopPropagation();
})
content.addEventListener('touchmove', function(event){
  event.preventDefault();
});

解决没有滚动条问题

我们可以自定义滚动效果

(function () {
   var app = document.querySelector('#app');
   var content = document.querySelector('#content');

   app.addEventListener('touchstart', function(event){
     event.preventDefault();
   });

   content.addEventListener('touchstart', function(event){
     var touch = event.changedTouches[0];
     //元素初始位置
     this.eleY = this.offsetTop;
     //手指初始位置
     this.startY = touch.clientY;
   });

   content.addEventListener('touchmove', function(event){
     var touch = event.changedTouches[0];
     //手指结束位置
     var endY = touch.clientY;
     // 手指距离差
     var disY = endY - this.startY;
     //计算
     var contentTop = this.eleY + disY;
     if (contentTop > 0) {
       contentTop = 0;
     }
     if (contentTop < window.innerHeight - content.offsetHeight) {
       contentTop = window.innerHeight - content.offsetHeight
     }
     content.style.top = contentTop + 'px'；
   });
})();