a:active加動畫點擊無效的處理方案

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標簽點擊無效。經(jīng)查驗，a標簽并沒有遮擋，這是什么原因呢？如何解決？

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

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

其實這個解決方案是蠻多的，因為我們是在手機中展現(xiàn)，期望效果是在動畫播放結束之后跳轉，我們可以添加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>
$('#haorooms li  a').on('click', 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地址替換成以個井號#結尾的目前鏈接地址；

執(zhí)行l(wèi)ocation.replace('')刷新當前地址（此時#會忽略）；

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

因為history.replaceState從IE10才開始支持，假如要兼容更早的瀏覽器，或者在PC端使用�？吹綇埓笊褚卜庋b了一個函數(shù)，這里我借用一下：

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);
        }
    }
};

上面函數(shù)可以如下應用

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

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

相關閱讀：

CSS里的if條件hack怎么寫

CSS網(wǎng)頁錯位怎么處理

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

以上就是a:active加動畫點擊無效的解決方案的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！