边框触摸按钮：主动应用但不触发事件

Question

我目前正在研究 [小] 触摸屏 UI。我运行遇到一个问题，用户可能会不小心点击我们按钮的边缘并激活 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，'capture' 用按钮触摸此边缘的最佳方法是什么？

谢谢！

Answer 1

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

删除你的 :active 伪 class 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

中获得更多灵感

边框触摸按钮：主动应用但不触发事件

Border touch button :active applying but not firing event

html

javascript

css

sass

touch