边框触摸按钮：活动应用但不触发事件答案

【问题标题】：Border touch button :active applying but not firing event边框触摸按钮：活动应用但不触发事件
【发布时间】：2017-09-08 19:59:01
【问题描述】：

我目前正在开发 [小型] 触摸屏 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;
}

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

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

谢谢！

【问题讨论】：

根据您的设计，不需要边框，因此您只需删除边框，整个工作正常.. :)
我将进行编辑，但在这种情况下，边框 == 边缘。我遇到了一个问题，用户可以触摸这些按钮的边缘并且touchend 事件没有触发，但:active css 正在应用
你能创建小提琴吗？所以我可以在那里更新代码。
抱歉耽搁了，这里是fiddle link 您需要将浏览器置于触摸屏模式以减少触摸事件。当事件触发时，您可以看到数字上升，如果您将触摸放在按钮的边缘，您可以看到事件没有触发

标签： javascript html css sass touch

【解决方案1】：

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

删除您的 :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获得更多想法

【讨论】：

有道理，我在处理焦点/模糊事件，这更优雅