如何让按钮将 "Drag" 识别为 "Click"

Question

我正在尝试用 Bootstrap 3 为 touch UI 制作 buttons。我的产品是为不熟悉触摸设备的人准备的，所以用户倾向于按按钮"deeply"。深按按钮时，屏幕上的手指 "position" 会滑动，浏览器（如 chrome）会识别按钮 dragged。当开始按下按钮时，按钮被激活，但是当 slipped 时，按钮被停用并且 click 被取消。

我想做的是制作按钮，即使用户按下带有 slip 的按钮，也能像 clicked 一样执行。

我该怎么做？

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>

如何让按钮将 "Drag" 识别为 "Click"

How to make buttons recognize "Drag" as "Click"

javascript

jquery

touch

twitter-bootstrap

twitter-bootstrap-3