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

我试图在应用导航到另一个页面之前更改链接的CSS。我之前在链接元素中添加了一个ontouchstart事件，以大大加快应用中的导航速度。问题是事件在CSS可以改变之前触发并导航。在移动设备触摸启动时添加CSS更改

有什么方法可以在页面更改前提供用户反馈？

其他备注：

这是一个SPA构建的使用AngularJS和PhoneGap的构建。
我发现使用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; 
}

来源

2017-08-20 Dominic Nguyen

也许按钮：重点？ – Droid

我结束了使用ontouchend而不是ontouchstart。这允许CSS在用户的手指被按下时改变，并且在用户释放他/她的手指之前页面不会导航。

来源

2017-09-14 20:20:05

你很可能只是增加稍有延迟到GOTO功能的window.location.href调用。这会在请求新文件之前给出CSS更新时间。它可能是这个样子：

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

这将使一个250毫秒的延迟......可能有足够的时间允许的CSS更新和启动新的文件请求之前，你的观众认识的变化。

来源

2017-08-20 22:54:35

虽然这是行得通的，但它会挫败使用'ontouchstart'和'onclick'的整个目的。 –

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

回答

相关问题