Added non-passive event listener to a scroll-blocking ‘touchmove‘ event解决方案

打开pc浏览器的控制台，发现了如下的警告：

解释警告信息： 

上面警告的大概意思是：

增加 non-passive（非被动）来监听这个滚动块 “触摸移动事件”，考虑将事件处理变成passive（被动），使页面更加具有响应性。

那肯定在这个触摸事件（touchmove）中存在passive或者non-passive这个属性，需要让事件改为被动的。

产生的原因：

我们使用的是"饿了吗"，在 ElementUI 表单校验的过程中，添加了一个非被动的事件监听器 touchmove，而该事件具有阻塞滚动的特性。这可能导致页面在移动设备上的滚动性能下降。

 这其实是Chrome 浏览器为了提高滚动性能，推出了一个优化方案，即默认将具有滚动阻塞特性的事件（touchmove）设置为被动（passive），以实现更流畅的滚动效果。

解决方案： 

 1.通过事件监听器选项将事件处理函数设置为被动（passive）

   根据上面可以得知，将事件监听函数的选项对象中的 passive 属性设置为 true 即可。

 (如下所示）

element.addEventListener('touchmove', handleTouchMove, { passive: true });

2.使用第三方库

使用default-passive-events解决，默认被动事件。

可以为某些事件启用被动事件侦听器。基本上，每次声明新的事件侦听器时，它都会自动设置 { passive： true }。

2.1 安装：

控制台运行代码安装依赖

yarn add default-passive-events

2.1 用法：

只需提供以下包装：

require('default-passive-events');

或将其下载到本地引入：

<script type="text/javascript" src="node_modules/default-passive-events/dist/index.js"></script>

或使用来自 unpkg CDN：

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script >