Javascript 为什么hammer.js刷卡不适用于iPhone

我找不到更直接的方法来询问熟悉hammer.js的人，所以我在这里发帖

所以我一直在开发一个web应用程序，其中8thwall使用hammer.js进行滑动/滚动。我一直在我的三星10上测试它，直到现在才在iPhone上测试。在我的三星10上，滑动/滚动功能一直运行良好，但在我可以使用的iPhone上，它根本不起作用。我试过iPhone8Plus、iPhoneXR和iPhone6S。请告诉我需要做什么。多谢各位

我的代码：

 //SCROLLING FUNCTION
    AFRAME.registerComponent('scroll-lines', {
        init: function(){
            var container = document.getElementById("scrolling-container");
            var content = document.getElementById("button-collections");
            var hammer = new Hammer(container);

            var initialX = 0;
            var deltaX = 0;
            var offset = initialX + deltaX;

            hammer.on("panleft panright", function(ev) {
                deltaX = ev.deltaX;
                offset = initialX + deltaX;

                container.scroll(-offset, 0);
            });

            Hammer.on(container, "mouseup", function(e) {
                initialX = offset;
            });
        }
    })

<!--SCROLLING BUTTONS-->
<!--IN ORDER FOR THESE TO BE DISPLAYED NEED TO STYLE THE Z-INDEX: 10. REFER style.css PAGE-->
<div id="scrolling-container">
    <div id="button-collections">
        <div id="box-all" class="cantap"></div>
        <div id="box-seremban" class="cantap"></div>
        <div id="box-klang" class="cantap"></div>
        <div id="box-ampang" class="cantap"></div>
        <div id="box-petaling" class="cantap"></div>
        <div id="box-kj" class="cantap"></div>
        <div id="box-ekspres" class="cantap"></div>
        <div id="box-transit" class="cantap"></div>
        <div id="box-monorail" class="cantap"></div>
        <div id="box-kajang" class="cantap"></div>
        <div id="box-skypark" class="cantap"></div>
    </div>
</div>

更新：我尝试了下面的建议，但没有解决问题。我发现如果我使用var-hammer=新的hammer（容器）；它适用于android而不是iOS，但如果我使用var-hammer=new-hammer（content）；它对这两个都有效，但在mouseup功能中，我无法滚动到iOS和android的末尾。使用panleft、panright和panend

---

更新2：既然hammerjs正在iphone上工作，我的问题有点得到了回答。封闭式问题。为当前情况打开了一个新的后续问题

您确定要使用pan吗？Pan基本上是用于拖动的。在hammer.js中，Swipe被称为

Swipe

。可能是安卓系统触发了正确的手势，但iphone却没有。如果你快速移动你的手指，这是一个轻扫，不会被识别为平底锅。另外，您应该使用

panend

而不是

mouseup

（因为android可能会启动mouseup，而iphone不会）

pan可能发生的事件有：

• 馅饼
• 潘莫夫
• 潘恩德
• 潘坎塞尔
• 左撇子
• 潘赖特
• 淘金
• 潘敦

---

那么你确定要使用pan吗？Pan基本上是用于拖动的。在hammer.js中，Swipe被称为

Swipe

。可能是安卓系统触发了正确的手势，但iphone却没有。如果你快速移动你的手指，这是一个轻扫，不会被识别为平底锅。另外，您应该使用

panend

而不是

mouseup

（因为android可能会启动mouseup，而iphone不会）

pan可能发生的事件有：

• 馅饼
• 潘莫夫
• 潘恩德
• 潘坎塞尔
• 左撇子
• 潘赖特
• 淘金
• 潘敦

---

尝试使用swipeleft和swiperight事件而不是pan事件。

尝试使用swipeleft和swiperight事件而不是pan事件。

没有在元素上定义的

光标

，iOS不会触发刷卡所需的

鼠标向下

或

鼠标向下

客户端事件。看

当您检测到ios并使用以下样式时，为您的

分配一个类

ios设备

body.ios-device {
    cursor: pointer !important; /* iOS click events don't fire without this! */
}

如果没有在元素上定义的
光标
，iOS不会触发刷卡所需的
鼠标向下
或
mouseup
客户端事件。看

当您检测到ios并使用以下样式时，为您的
分配一个类
ios设备

body.ios-device {
    cursor: pointer !important; /* iOS click events don't fire without this! */
}

因此，如果我使用
var-hammer=new-hammer（容器）它适用于android而不是iOS，但如果我使用
var-hammer=new-hammer（内容）
它对这两种操作都有效，但是在
mouseup
功能中，我无法滚动到iOS和android的末尾。使用panleft、panright和panendSo，如果我使用
var-hammer=new-hammer（容器）它适用于android而不是iOS，但如果我使用
var-hammer=new-hammer（内容）
它对这两种操作都有效，但是在
mouseup
功能中，我无法滚动到iOS和android的末尾。使用panleft、panright和panendSo，如果使用var-hammer=newhammer（容器）；它适用于android而不是iOS，但如果我使用var-hammer=new-hammer（content）；它对这两个都有效，但在mouseup功能中，我无法滚动到iOS和android的末尾。使用panleft、panright和panendSo，如果使用var-hammer=newhammer（容器）；它适用于android而不是iOS，但如果我使用var-hammer=new-hammer（content）；它对这两个都有效，但在mouseup功能中，我无法滚动到iOS和android的末尾。使用panleft、panright和panend