为移动设备添加 CSS 触摸启动更改

Question

我试图在应用导航到另一个页面之前更改 link 的 CSS。 我之前已将 ontouchstart 事件添加到 link 元素以大大加快应用程序中的导航速度。问题是在 CSS 可以更改之前事件触发并且应用程序导航。

在页面更改之前我可以通过哪些方式提供用户反馈？

补充说明：

• 这是使用 AngularJS 和 PhoneGap Build 构建的 SPA。
• 我发现使用 button:active 只会在单击按钮后触发，因此页面会在 CSS 更改之前导航。
• 我相信这需要在触摸屏设备上进行测试才能看到效果。
• 这是我在这里的第一个问题，所以请保持温和:)

下面是一些示例代码：

HTML

<a class="button" ontouchstart="goTo('#!/stats', 'buttonActive', this);" onclick="goTo('#!/stats', 'buttonActive', this);">STATS</a>

CSS

.button {
    display: flex;
    background-color: #000000; 
    color: dodgerblue;
    font-size: 4vmin;
    cursor: pointer;
    text-decoration: none;
    font-size: 7vmin;
    border: 0.75vmin solid dodgerblue;
    border-radius: 1vmin;
    height: 8vh;
    width: 40vmin;
    padding: 2vmin;
    margin: 5vmin auto;
    align-items: center;
    justify-content: center;
}
.buttonActive {
    background-color: dodgerblue;
    color: white;
}

JS

function goTo (location, addClass, elem) {
    elem.className += addClass;
    window.location.href = location;
}

Answer 1

您可以稍微延迟一下 goTo 函数的 window.location.href 调用。这将使 css 有时间在请求新文件之前进行更新。它可能看起来像这样：

function goTo (location, addClass, elem) {
  elem.className += addClass;
  setTimeout(function(){ 
    window.location.href = location;
  }, 250);
}

这将造成 250 毫秒的延迟...可能有足够的时间让 css 进行更新，并且您的观众可以在启动新文件请求之前识别更改。

Answer 2

我最终使用 ontouchend 而不是 ontouchstart。这允许 CSS 在用户按下手指时发生变化，并且在用户释放 his/her 手指之前不会导航页面。