a:active加動(dòng)畫點(diǎn)擊無(wú)效的處理方案

a標(biāo)簽：active加動(dòng)畫點(diǎn)擊無(wú)效

我的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>

蘋果手機(jī)中，a標(biāo)簽點(diǎn)擊無(wú)效。經(jīng)查驗(yàn)，a標(biāo)簽并沒(méi)有遮擋，這是什么原因呢？如何解決？

造成這種情況的原因是active有個(gè)1秒鐘的動(dòng)畫，假如你長(zhǎng)按按鈕，也是沒(méi)有辦法跳轉(zhuǎn)的。

a標(biāo)簽：active加動(dòng)畫點(diǎn)擊無(wú)效解決方案

其實(shí)這個(gè)解決方案是蠻多的，因?yàn)槲覀兪窃谑謾C(jī)中展現(xiàn)，期望效果是在動(dòng)畫播放結(jié)束之后跳轉(zhuǎn)，我們可以添加ontouchend事件，touchend之后跳轉(zhuǎn)到某個(gè)地址。

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

加了這個(gè)之后，不管是長(zhǎng)按，還是點(diǎn)擊，按結(jié)束之后，都是可以跳轉(zhuǎn)到指定地址的。

頁(yè)面跳轉(zhuǎn)歷史返回中不記錄

關(guān)于儲(chǔ)存瀏覽歷史，我之前文章中有提及過(guò)：SPA單頁(yè)面web應(yīng)用的一些簡(jiǎn)介 以及 ajax無(wú)刷新頁(yè)面切換,歷史記錄后退前進(jìn)解決方案

我們可以通過(guò)

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

對(duì)瀏覽器歷史進(jìn)行操作。

但是實(shí)際情況中，也有我們無(wú)需記錄瀏覽歷史的情況，例如“一個(gè)頁(yè)面中有2個(gè)tab切換標(biāo)簽，tab切換是修改了瀏覽器地址”，tab切換是默認(rèn)記錄到歷史的。因此我們點(diǎn)擊返回按鈕的時(shí)候，不停的在2個(gè)tab中切換，但是，實(shí)際我們是想返回到上一頁(yè)的，不是在2個(gè)tab中切換。那么這種情況如何解決呢？

這個(gè)我們想到了

location.replace(newURL)

replace() 方法不會(huì)在 History 對(duì)象中生成一個(gè)新的記錄。當(dāng)使用該方法時(shí)，新的 URL 將覆蓋 History 對(duì)象中的當(dāng)前記錄。

因此代碼我們可以如下寫：

<ul id="haorooms">
  <li><a href="http://www.haorooms.com/archives">標(biāo)簽一</a></li>
  <li><a href="http://www.haorooms.com/tools/index">標(biāo)簽二</a></li>
</ul>
$('#haorooms li  a').on('click', function (event) { //tab中a標(biāo)簽點(diǎn)擊
    event.preventDefault();
    location.replace(this.href);
})

上面代碼在某些手機(jī)中返回?zé)o效，因此方案失��！

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

上面方法失敗了，我就得轉(zhuǎn)換思路了，看到張?chǎng)涡翊笊袂岸螘r(shí)間也有一個(gè)類似的案例解決方案，因此我借鑒了一下！

解決方案如下：

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

首先通過(guò)HTML5 history.replaceState()方法把當(dāng)前URL地址替換成以個(gè)井號(hào)#結(jié)尾的目前鏈接地址；

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

通過(guò)這個(gè)方案，我們?cè)僭趺辞袚Qtab，點(diǎn)擊返回之后，照常返回到進(jìn)入頁(yè)面的前一頁(yè)。不會(huì)再在tab中切換了！

因?yàn)閔istory.replaceState從IE10才開(kāi)始支持，假如要兼容更早的瀏覽器，或者在PC端使用�？吹綇埓笊褚卜庋b了一個(gè)函數(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ù)可以如下應(yīng)用

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

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

相關(guān)閱讀：

CSS里的if條件hack怎么寫

CSS網(wǎng)頁(yè)錯(cuò)位怎么處理

怎么用CSS3做出燈光照射顯示文字動(dòng)畫

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