jquery - 可靠地检测多个平台上的 HTML 按钮释放

Question

我想做一些看似简单的事情:在单击或触摸 div 时将 div 变为绿色。 (也就是说，本质上是一个可以按下任意秒数的按钮)。

我几乎让它在这个 fiddle 中工作: https://jsfiddle.net/lrodgi/66gramjh/

我正在做的(几乎 有效)只是监听用于释放的 mouseup 和 touchend 事件:

jbtn.on('mousedown touchstart', function(event) {
    onPressed();
});

$(document).on('mouseup touchend', function() {
    onReleased();
});

这在计算机上运行良好，但在移动浏览器中，按住一段时间后出现的上下文菜单会破坏它。因此，我通过以下方式阻止该菜单出现:

function onContextMenu(event) {
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
    return false;
}

jbtn.on('contextmenu', onContextMenu);

有了这些，它似乎在所有桌面浏览器和移动 Chrome 中都能正常工作。但是，它仍然无法在 Firefox Mobile 中正常工作。

在 Firefox 移动版中，当我按住 div 几秒钟时，没有菜单出现，但引发了“touchcancel”事件。不是触摸端或鼠标弹起。所以 div 永远不会被释放。

有什么让它完美运行的想法吗？

我不介意使用 javascript 库。事实上，我已经尝试过 jQuery Mobile 的 vmouseup 和 vmousedown 事件，但没有成功(几秒钟后发生的 touchcancel 也阻止了 vmouseup 提升)。

Answer 1

CSS 怎么样 pseudo selectors :active 和 :focus?

#btn {
  background-color: green;
}
#btn:active, #btn:focus {
  background-color: red;
}

.all {
  // Just in case.
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  touch-callout: none;
}

#btn {
  background-color: green;
}
#btn:active, #btn:focus {
  background-color: red;
}

<div class="all">
  <div id="btn" class="released" style="width: 50px; height: 50px">
  </div>
</div>