时间戳

首页 > 解决方案 > 禁用 Vanilla-tilt.js 的鼠标移动但保持陀螺仪效果

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

问题描述

我正在使用插件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 ，如果这样更容易的话。

我构建了一个缩小的代码示例，您可以在此处查看。

标签： javascripthtmljquery

解决方案

我刚刚注意到，在“轻拍”的情况下， event.movementXandevent.movementY等于 0，所以我相信一个简单的解决方案需要稍微调整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 主页测试了此修补程序，它似乎有效，但最终解决方案可能会有所不同，具体取决于您的实施。

请在您的移动设备中测试它并告诉我。

推荐阅读