javascript - 边框触摸按钮 :active applying but not firing event

Question

我目前正在开发[小型]触摸屏用户界面。我遇到了一个问题，用户可能不小心点击了我们按钮的边缘并激活了 CSS 触发器，但 touchend 事件没有触发，因为按钮实际上没有被按下。

这是一个可视化表示，黄色框表示手指点击，按钮处于事件状态，但未激活事件。

如果它是相关的，这里也是 scss

.action-button {
  @extend .nav-button;
  height: 85%;
  border-radius: $border-radius;
  border: none;
  min-width: 85px;
  margin: {
    left: 5px;
    right: 5px;
    top: 5px;
  }
  font-weight: bold;
}
.nav-button {
  &.active {
    background-color: $active-button-background-color;
  }
  &:last-of-type {
    margin-right: 10px;
  }
}
.nav-button:active {
  background-color: $active-button-background-color;
}

这是一个 fiddle ，所以你也可以用它来玩https://jsfiddle.net/kaagu3dj/12/ [请注意，您需要处于触摸模拟器模式]

那么 TL;DR，用按钮“捕捉”这种边缘触摸的最佳方式是什么？

谢谢!

Answer 1

这是 touchend 和 touchstart 事件的 native 行为。 所以你可以像这样做同样的事情。

删除你的 :active 伪类 CSS，并添加如下脚本。

let count = 0;
$('.main').on('touchstart', function(event) {
  count++;
  $('#count').html(count);
  $('.main').css("background", "blue");
});
$('.main').on('touchend', function(event){
    $('.main').css("background", "#ddd");
});

也许这会对你有所帮助。您还可以从 fiddle 中获得更多想法