javascript - Hammer.js on tap 停止滚动父 div

Question

我目前正在使用 Hammer.JS 创建桌面和移动友好的用户界面。

以下是父 div 的 CSS，其中包含由 JS 填充的较小 div。

.attributescroll {
  float: left;
  width: 100%;
  height: 100px;
  background: #1A1A1A;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  cursor: pointer;
}

它由几个子元素填充为“.attribute”

对于它们中的每一个，我都绑定(bind)了一个点击事件，它在文本的其他地方设置了文本(目前)。但是这样做我现在无法滚动父 div。

$('.attribute').each(function() {
  var selectedAttribute = new Hammer(this);
  selectedAttribute.on("tap", function(event) {
    if ($(".mobiletopicwrap").css("display") == "block") {
      $(".mtopmytopic").html($(event.target).html());
    } else {
      $(".topmytopic").html($(event.target).html());
    }
  });
});

我试过设置触摸操作，但无济于事。任何指导将不胜感激。

Answer 1

无法重现您的情况。根据您的代码，我在下面编写了这段代码片段。希望您能以类似的方式重现您的问题，因此我可以提供进一步的帮助。

$('.attribute').each(function() {
  var selectedAttribute = new Hammer(this);
  selectedAttribute.on("tap", function(event) {
    if ($(".mobiletopicwrap").css("display") == "block") {
      $(".mtopmytopic").html($(event.target).html());
    } else {
      $(".topmytopic").html($(event.target).html());
    }
  });
});  

.attributescroll {
  float: left;
  width: 100%;
  height: 100px;
  background: #1A1A1A;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  cursor: pointer;
}
.attribute {
  width: 100px;
  background: darkred;
  height: 80px;
  display: inline-block;
  margin-top: 10px;
}
.parent {
  width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>

<div class="attributescroll">
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
  <div class="attribute"></div>
</div>