为滚动阻止"touchstart"事件添加了非被动事件侦听器

Question

突然间,今天突然间,我开始在我们网站的每个页面上看到这个

Added non-passive event listener to a scroll-blocking 'touchstart' event.
Consider marking event handler as 'passive' to make the page more responsive

它不仅仅是一两次......它就像成千上万的......

他们疯了.

阻止洪水泛滥的唯一方法就是注释掉这条线

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

我阅读了其他关于此违规行为的帖子,但我真的看不到我在两小时前和现在之间做了任何不同的事情(我做了一次完全回滚,看它是否有帮助)

它几乎就像有人把一个bug放到了jquery.min.js中,但是我很怀疑那个因为每个人都会得到它.

有任何想法吗？我试着尽我所能调试,我仍然不知道是什么原因导致的？!？

UPDATE

我替换了所有<button><md-tooltip>text</md-tooltip></button>宽度<button data-toggle="tooltip" title="text"></button>这删除了99%的所有违规行为.

Answer 1

这解决了我的问题:

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchstart", handle, { passive: false });
    } else {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};

Answer 2

我正在使用各种事件，这似乎解决了我的用例

(function () {
    if (typeof EventTarget !== "undefined") {
        let func = EventTarget.prototype.addEventListener;
        EventTarget.prototype.addEventListener = function (type, fn, capture) {
            this.func = func;
            if(typeof capture !== "boolean"){
                capture = capture || {};
                capture.passive = false;
            }
            this.func(type, fn, capture);
        };
    };
}());

Answer 3

Sergio 的答案是正确的，将其添加到底部的 jquery 脚本中。如果 touchstart 和 touchmove 出现问题，只需添加相同的代码并将 touchstart 替换为 touchmove，如下所示：

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchstart", handle, { passive: false });
    } else {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};
jQuery.event.special.touchmove = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchmove", handle, { passive: false });
    } else {
      this.addEventListener("touchmove", handle, { passive: true });
    }
  }
};

Answer 4

好的,再多一点,这不是一个新的行为,它已经被报道了一段时间,jQuery仍然没有修复它.

问题在于,对于一​​个处理程序来说,passive它必须确定永远不会调用,preventDefault()但jQuery事先并不知道...

我能给你的唯一提示是更改你的控制台日志记录级别并删除"详细".关于解决这个问题的想法,请关注这个问题.

Answer 5

@neel-singh 答案的改进解决方案

(function () {
  if (typeof EventTarget !== 'undefined') {
    let supportsPassive = false;
    try {
      // Test via a getter in the options object to see if the passive property is accessed
      const opts = Object.defineProperty({}, 'passive', {
        get: () => {
          supportsPassive = true;
        },
      });
      window.addEventListener('testPassive', null, opts);
      window.removeEventListener('testPassive', null, opts);
    } catch (e) {}
    const func = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function (type, fn) {
      this.func = func;
      this.func(type, fn, supportsPassive ? { passive: false } : false);
    };
  }
})();