移动端开发,常常需要加按下态,就是当用户点击某个URL时,给相应的标签添加按下效果样式。
1、CSS样式里有a:active来实现
缺点:这个没有进行跳转(即没有触发点击事件)就会产生按下态,这是不符合产品需求的,且某些android机型不支持该样式。
2、使用js在click事件里面点击时,e.preventDeafult(),阻止默认跳转,setTimeout延时200MS,加上一个效果之后,再进行跳转。
缺点:延时影响用户体验
3、终极方法,结合touchstart touchmove touchend事件来实现
var move; $('a').live('touchend touchstart touchmove',function(e){ if(e.type==='touchstart'){ move= null; }else if(e.type==='touchmove'){ if(move) return; move= true; }else{ if(move) return; var $se= $(this).css("opacity","0.7"); setTimeout(function(){
//按下态 $se.css("opacity","1.0"); }, 500); } });