a:active加動畫點擊無效的解決方案

我們常常會遇到一個問題，a:active加動畫點擊無效，今天給大家看一下我的程式碼以及的解決方案，順便給大家分享一個如何不記錄url跳轉歷史的方法。

a標籤：active加動畫點擊無效

我的css程式碼如下：

.haorooms{  -webkit-animation: jpyd 1.5s cubic-bezier(0,.98,.44,1) both;  animation:  jpyd 1.5s cubic-bezier(0,.98,.44,1) both;}
.haorooms:active{ -webkit-animation: zoomOuts 1s ; animation: zoomOuts 1s; }

html程式碼如下：

<a class="haorooms delay3 " href="/jingpin/"  ></a>

蘋果手機中，a標籤點選無效。經查驗，a標籤並沒有遮擋，這是什麼原因？如何解決？

造成這種情況的原因是active有個1秒鐘的動畫，假如你長按按鈕，也是沒有辦法跳轉的。

a標籤：active加動畫點擊無效解決方案

其實這個解決方案是蠻多的，因為我們是在手機中展現，期望效果是在動畫播放結束之後跳轉，我們可以加入ontouchend事件，touchend之後跳到某個地址。

ontouchend="window.location.href='/jingpin/'"

加了這個之後，不管是長按，還是點擊，按結束之後，都是可以跳到指定位址的。

頁面跳轉歷史返回中不記錄

關於儲存瀏覽歷史，我之前文章中有提及過：SPA單頁web應用的一些簡介以及ajax無刷新頁面切換,歷史記錄後退前進解決方案

我們可以透過

history.replaceState 
history.pushState(state, title, url)

對瀏覽器歷史進行操作。

但是實際情況中，也有我們無需記錄瀏覽歷史的情況，例如“一個頁面中有2個tab切換標籤，tab切換是修改了瀏覽器地址”，tab切換是預設記錄到歷史的。因此我們點擊返回按鈕的時候，不停的在2個tab中切換，但是，實際我們是想回到上一頁的，不是在2個tab中切換。那麼這種情況該如何解決呢？

這個我們想到了

location.replace(newURL)

#replace() 方法不會在 History 物件中產生一個新的記錄。當使用該方法時，新的 URL 將覆寫 History 物件中的目前記錄。

因此程式碼我們可以如下寫：

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">标签一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">标签二</a></li>
</ul>
$(&#39;#haorooms li  a&#39;).on(&#39;click&#39;, function (event) { //tab中a标签点击
    event.preventDefault();
    location.replace(this.href);
})

上面程式碼在某些手機中傳回無效，因此方案失敗！

history.replaceState()和location.replace()方法

上面方法失敗了，我就得轉換思路了，看到張鑫旭大神前段時間也有一個類似的案例解決方案，因此我借鏡了一下！

解決方案如下：

$('#haorooms li  a').on('click', function (event) {
    event.preventDefault();
    history.replaceState(null, document.title, this.href.split('#')[0] + '#');
    location.replace('');
})

首先透過HTML5 history.replaceState()方法把目前URL位址替換成以個井號#結尾的目前連結位址；

#執行location.replace('')刷新目前位址（此時#會忽略）；

透過這個方案，我們再怎麼切換tab，點擊返回之後，照常回到進入頁面的前一頁。不會再在tab中切換了！

因為history.replaceState從IE10才開始支持，假如要相容於更早的瀏覽器，或在PC端使用。看到張大神也封裝了一個函數，這裡我借用一下：

var fnUrlReplace = function (eleLink) {
    if (!eleLink) {
        return;
    }
    var href = eleLink.href;
    if (href && /^#|javasc/.test(href) === false) {
        if (history.replaceState) {
            history.replaceState(null, document.title, href.split('#')[0] + '#');
            location.replace('');
        } else {
             location.replace(href);
        }
    }
};

上面函數可以如下應用

$('#haorooms li  a').on('click', function (event) {
  if (event && event.preventDefault) {
      event.preventDefault();
   }
   fnUrlReplace(this);
   return false;
})

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS裡的if條件hack怎麼寫

CSS網頁錯位怎麼處理

怎麼用CSS3做出燈光照射顯示文字動畫

#

以上是a:active加動畫點擊無效的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！