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>
$('#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地址替换成以个井号#结尾的目前链接地址；

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

相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！

相关阅读：

CSS里的if条件hack怎么写

CSS网页错位怎么处理

怎么用CSS3做出灯光照射显示文字动画

以上就是a:active加动画点击无效的解决方案的详细内容，更多请关注其它相关文章！