在移动设备的触摸启动上添加 CSS 更改答案

【问题标题】：Add CSS change on touch start for mobile devices在移动设备的触摸启动上添加 CSS 更改
【发布时间】：2018-01-28 20:01:58
【问题描述】：

我正在尝试在应用导航到另一个页面之前更改链接的 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;
}

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

【问题讨论】：

也许按钮：焦点？

标签： javascript css mobile phonegap-build touch-event

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

这将导致 250 毫秒的延迟...可能有足够的时间让 css 更新并且您的查看器在启动新文件请求之前识别更改。

【讨论】：

虽然这样可行，但它会破坏使用“ontouchstart”与“onclick”的全部目的。