javascript - 在移动设备的触摸启动时添加 CSS 更改

Question

我试图在应用导航到另一个页面之前更改链接的 CSS。我之前向链接元素添加了一个 ontouchstart 事件，以大大加快应用程序中的导航速度。问题是在 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

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