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标签点击无效。经查验，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;
})
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
以上就是a:active加动画点击无效的解决方案的详细内容，更多请关注其它相关文章！