禁用Vanilla-tilt.js的鼠标移动，但保留陀螺仪效果

Question

我正在使用插件Vanilla-tilt.js，在桌面上它工作得很好。在移动设备上，倾斜效果响应于设备方向，这很好，但当用户在设备上的某个地方点击时，它会使倾斜区域朝向点击的位置猛然移动，然后返回到原来的位置。我在Android上使用Chrome，可以通过上面的链接自己尝试一下。

我希望在手机上保持陀螺仪效果，但禁止用户点击以影响磁贴位置。我使用的是内联配置，下面是一个示例：

<div data-tilt data-tilt-full-page-listening data-tilt-reset="false">Tilt object goes here</div>

我的第一个想法是下载vanilla-tilt.js源代码并修改它，以便只在屏幕有一定宽度时才查找鼠标事件。我不介意切换到jQuery版本，Tilt.js如果这样做更容易的话。

我构建了一个简化的代码示例，您可以查看here。

Answer 1

我认为你可以使用像这样的document.body.style.pointerEvents = 'none'，但我无法测试它，因为我在PC上。

Answer 2

我刚刚注意到，在“点击”的情况下，event.movementX和event.movementY等于零，所以我认为一个简单的解决方案需要稍微调整一下onMouseMove函数，如下所示：

onMouseMove(event) {
  if(event.movementX == 0 && event.movementY == 0) return false;
  if (this.updateCall !== null) {
    cancelAnimationFrame(this.updateCall);
  }
  this.event = event;
  this.updateCall = requestAnimationFrame(this.updateBind);
}

在您的示例中，您使用的是内置的自动初始化。还有更多的工作要做，这将需要修补已经附加的侦听器。以下是我是如何做到的，作为概念的证明：

(function() {
    var elements = document.querySelectorAll("[data-tilt]");
    elements.forEach(function(item, index){
        function onMouseMove(event) {
            if(event.movementX == 0 && event.movementY == 0) return false;
            if (this.updateCall !== null) {
              cancelAnimationFrame(this.updateCall);
            }
            this.event = event;
            this.updateCall = requestAnimationFrame(this.updateBind);
        }
        var tiltObj = item.vanillaTilt;
        tiltObj.elementListener.removeEventListener("mousemove", tiltObj.onMouseMoveBind);      
        tiltObj.onMouseMoveBind = onMouseMove.bind(tiltObj);
        tiltObj.elementListener.addEventListener("mousemove", tiltObj.onMouseMoveBind);
    });     
})();

为了确认，我用您的简化测试用例和vanilla-tilt home page测试了这个修补程序，它似乎可以工作，但最终的解决方案可能会有所不同，这取决于您的实现。

请在您的移动设备上测试它，并让我知道。