Question

我正在尝试用buttons和Bootstrap 3来制作touch UI的{{1}}。我的产品适用于不熟悉触摸设备的用户，因此用户倾向于“深度”按下按钮。深按按钮时，屏幕上的手指“位置”滑动，浏览器（如chrome）识别按钮dragged。当开始按下按钮时，按钮被激活，但是当slipped时，按钮被禁用，click被取消。

我想做的是使按钮的性能与clicked相同，即使用户用slip按下按钮。

我该怎么做？

Here是我的示例代码。请在触摸设备或浏览器上的触摸模拟器上查看它。

Answer 1

感谢您的有用评论。终于我找到了答案：

const $touchButton = $(".touch-button");

$touchButton.on("mousedown touchstart", e => {
  const $button = $(e.currentTarget);
  $button.addClass("active");
});

$touchButton.on("touchmove", e => {
  const $button = $(e.currentTarget);
  $button.addClass("touch-button--touchmoving");
});

$touchButton.on("touchend", e => {
  const $button = $(e.currentTarget);
  $button.removeClass("active");
  if($button.hasClass("touch-button--touchmoving")) {
    $button.click();
    $button.removeClass("touch-button--touchmoving");
  }
});

$touchButton.on("mouseup", e => {
  const $button = $(e.currentTarget);
  $button.removeClass("active");
});

$touchButton.on("mouseleave", e => {
  const $button = $(e.currentTarget);
  $button.removeClass("active");
});

$touchButton.on("contextmenu", e => {
  return false;
});

$touchButton.on("click", e => {
  alert("世界一！");
});

.touch-button {
  background-color: #169632;
  box-shadow: 0px 8px 0px 0px rgba(13,87,30,1);
  border: none;
  outline: none;
}

.touch-button.active {
  margin-top: 8px;
  box-shadow: none;
}

.container {
  margin: 10px;
}

#my-button {
  border-radius: 8px;
  padding: 16px;
  color: white;
  font-size: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <button id="my-button" class="touch-button">日本の米は</button>
</div>

如何使按钮将“拖动”识别为“单击”

1 个答案: