zoukankan      html  css  js  c++  java
  • 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题

    开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决。

    页面引入fastClick.js后,滑动H5页面的时候发现谷歌浏览器会报错,如下:

    Unable to preventDefault inside passive event listener due to target being treated

    查询了之后发现这是因为Chrome及其内核浏览器更新了一项新特性,原先只会报黄色等级的错误,现在升到红色了。那么如何解决呢?

    一般现在有两种方案:

    1. 最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.
    2. 手动清除默认行为
    document.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, {
        passive: false
    });

    看似第一种简单方便,可是用了之后突然发现页面不能滑动了,在浏览器中鼠标还是能正常滚动,但改成触摸模式后就不行了。在手机上也不能滑动。关于touch-action的属性值,具体查文档就行了。auto是默认值,表示手势操作什么的完全有浏览器自己决定。manipulation表示浏览器只允许进行滚动和持续缩放操作,类似双击缩放这种非标准操作就不可以。想当初,click事件在移动端有个300ms延时,就是因为避免和手机双击行为发生冲突。然而,当我们设置了touch-action:manipulation干掉了双击行为,则显然,300ms延时就不复存在,因此,html {touch-action: manipulation;}声明可以用来避免浏览器300ms延时问题。想到这,突然想到还用使用fastClick吗,直接用这个css属性不就行了。还引那么一堆东西干嘛。查了touch-action的兼容性,发现在移动端大多数还是兼容的。于是移动端以后就可以大胆的使用click事件了。

    转: https://www.cnblogs.com/dxzg/p/9378334.html

    https://blog.csdn.net/iChangebaobao/article/details/95351586

  • 相关阅读:
    『题解』POJ1753 Flip Game
    『数论』乘法逆元
    『数据结构』RMQ问题
    UVA 253 Cube painting 【数学】
    POJ 1852 Ants 【水+Trick+贪心】
    POJ 2955 Brackets 【区间DP】
    LOJ 1422 Halloween Costumes【区间DP】
    HDU 4193 Non-negative Partial Sums 【单调队列】
    CodeForces-545C Woodcutters 【贪心+机智】
    CodeForces 19D A and B and Interesting Substrings 【前缀和】
  • 原文地址:https://www.cnblogs.com/fps2tao/p/12065934.html
Copyright © 2011-2022 走看看