在移動設備觸摸啓動時添加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更改

回答

相關問題