边框触摸按钮：激活应用但不激活事件

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;
}

这是一个小提琴，所以你也可以玩这个https://jsfiddle.net/kaagu3dj/12/ [注意你需要处于触摸模拟器模式]

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

谢谢！

Answer 1

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

删除：有效伪类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

获得更多的想法