美文网首页
阻止IOS系统 safari、微信浏览器 拖拽页面 默认行为

阻止IOS系统 safari、微信浏览器 拖拽页面 默认行为

作者: squidbrother | 来源:发表于2019-12-26 21:38 被阅读0次

    解决办法1:

    在touch的事件监听方法上绑定第三个参数{ passive: false },
    通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。

    • 在文章内容撑满一屏的情况下
    document.body.addEventListener('touchmove' , function(e){
      var e=e||window.event;
      e.preventDefault();
    },{ passive: false })
    
    • 在文章内容不足以撑满一屏的情况下(如果使用上面的,拖动页面留白区域,依然触发默认拖拽)
    document.addEventListener('touchmove' , function(e){
      var e=e||window.event;
      e.preventDefault();
    },{ passive: false })
    

    解决办法2:
    依靠于css样式
    body { touch-action: none; }

    摘录:

    2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度。

    在 Android 版 Chrome 浏览器的 touch 事件监听器的页面中,80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上,有 10% 的页面增加至少 100ms 的延迟,1% 的页面甚至增加 500ms 以上的延迟。
    由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),它需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿,也就是说,当浏览器等待执行事件的默认行为时,大部分情况是白等了。
    如果 Web 开发者能够提前告诉浏览器:“我不调用 preventDefault 函数来阻止事件事件行为”,那么浏览器就能快速生成事件,从而提升页面性能,Passive event listeners 的提出就解决了这样的问题。
    

    //可以看真机操作比对,更加直观
    真机操作比对

    原因:
    这是因为Chrome及其内核浏览器更新了一项新特性,具体见(打开看人品):https://www.chromestatus.com/features/5093566007214080

    直接传递passive:false解决 treated as passive 错误

    参考文章:
    //https://www.cnblogs.com/ziyunfei/p/5545439.html
    //https://blog.csdn.net/lovelyelfpop/article/details/81004319

    相关文章

      网友评论

          本文标题:阻止IOS系统 safari、微信浏览器 拖拽页面 默认行为

          本文链接:https://www.haomeiwen.com/subject/fgsloctx.html