Hammer.js过了一段时间就停止工作了

Hammer.js stops working after a while

本文关键字：停止工作 一段时间 js 过了 Hammer      更新时间：2023-09-26

我遇到了这个奇怪的问题，我正在使用hammer.js库来创建一些响应表功能。

当我在iPhone上测试页面时（这个问题在任何Android设备上都不会发生，只在iPhone上发生），如果我在本地机器上测试它，功能会很好——我使用Ghostlab从本地机器测试页面。然而，当我将代码部署到暂存服务器时，功能会中断。我所说的breaks的意思是它工作得很好，但在两个pan事件之后就停止了（pan事件是hammer.js事件）。这个问题在Chrome和iPhone上的Safari上都有。

我还在手机上打开了Safari控制台，没有收到任何JS错误。我尝试将本地.js文件复制到临时服务器，但这也没有解决问题。

有人知道为什么同样的代码在暂存服务器上不起作用，但在本地服务器上起作用吗？

我相信这是因为包含平移事件的元素被移出了屏幕。

因此，不需要在pan上添加回调函数来设置.gallery-inner上的left css值，如下所示：

<script>
var startPos = 0;
var scrollContainer = document.getElementById('scrollable');
var hammertime = new Hammer(scrollContainer);
hammertime.on('panend', function(ev) {
  startPos = parseInt(scrollContainer.style.left.replace('px', ''));
});
hammertime.on('pan', function(ev) {
  var pos = parseInt(startPos) + ev.deltaX;
  scrollContainer.style.left = pos + 'px';
});
</script>
<style>
.gallery {
  overflow: hidden;
  height: 200px;
  width: 300px;
  position: relative;
}
.gallery-inner {
  position: relative;
  white-space: nowrap;
  overflow: visible;
}
.gallery-inner > div {
  display: inline-block;
  width: 50px;
  height: 200px;
  background: #000;
  color: #fff;
}
</style>
<div class="gallery">
  <div id="scrollable" class="gallery-inner">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
  </div>
</div>

为触摸区域添加另一个容器，并在其上设置left值。

例如。

<script>
  var startPos = 0;
var hammerContainer = document.getElementById('hammer');
var scrollContainer = document.getElementById('scrollable');
var hammertime = new Hammer(hammerContainer);
hammertime.on('panend', function(ev) {
  startPos = parseInt(scrollContainer.style.left.replace('px', ''));
});
hammertime.on('pan', function(ev) {
  var pos = parseInt(startPos) + ev.deltaX;
  scrollContainer.style.left = pos + 'px';
});
</script>
<style>
.gallery {
    overflow: hidden;
    height: 200px;
  width: 300px;
    position: relative;
}
.gallery-scrollable {
    position: relative;
    white-space: nowrap;
    overflow: visible;
}
.gallery-scrollable > div {
  display: inline-block;
  width: 50px;
  height: 200px;
  background: #000;
  color: #fff;
}
</style>
<div class="gallery">
  <div id="hammer" class="gallery-inner">
    <div id="scrollable" class="gallery-scrollable">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
    </div>
  </div>
</div>

此处的代码示例：http://codepen.io/anon/pen/QbgLzz

相关文章：