Hammerjs不是在IOS上的Chrome或Safari工作（与Vuejs制造）

Question

我的工作，有一个navdrawer的应用程序，我加入hammerjs关闭navdrawer手势刷卡向左滑动时，代码如下所示：

<template>
  <nav id="navbar" class="navbar">
    <button @click="toggleNavbar">toggle drawer</button>
    <div class="navdrawer" :class="{'navdrawer--active': active}">
      <ul class="navdrawer__links">
        <router-link
          v-for="(link, linkId) in links"
          :key="linkId"
          :class="link.classes"
          tag="li"
          :to="{path: '/link'}"
        >{{link.name}}</router-link>
      </ul>
    </div>
  </nav>
</template>
<script>
import Hammerjs from 'hammerjs';

export default {
  mounted() {
    const app = new Hammerjs(document.documentElement);
    app.domEvents = true
    app.on('swipeleft', (ev) => {
      const NAVBAR = document.querySelector('.navbar');
      if (ev.srcEvent.path.includes(NAVBAR) && this.active) {
        this.closeNavbar();
      }
    });
  },
  data() {
    return {
      links: [
        {
          name: 'LINK1',
          classes: {
            link: true,
          },
        },
        ...
      ],
      active: false;
    };
  },
  methods: {
    toggleNavbar() {
      this.active = !this.active;
    }
    closeNavbar() {
      this.active = false;
    },
  },
};
</script>

有关代码和行为的一些细节

该#navbar元素包含在其内部的抽屉，有一个风格放出来画面时active是假的，当它的truthy里面的画面，我创建的document.documentElement的Hammerjs实例，这样我就可以使用事件冒泡。当我滚动文档我检查ev.srcEvent.path包含我存储在一个恒定的#navbar DOM元素，如果它（如果用户刷权在打开的navDrawer）有火的closeNavbar()功能。它完美地在电脑和Android，但它不会对任何iPhone我测试工作。

Answer 1

问题是IOS不承认document.documentElement中，将其更改为document.body的开了窍。

  mounted() {
    const app = new Hammerjs(document.body);
    app.domEvents = true
    app.on('swipeleft', (ev) => {
      const NAVBAR = document.querySelector('.navbar');
      if (ev.srcEvent.path.includes(NAVBAR) && this.active) {
        this.closeNavbar();
      }
    });
  },