webzhangnan

移动端开发,常常需要加按下态,就是当用户点击某个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); } });

 

 

 

分类:

技术点:

相关文章:

  • 2021-12-09
  • 2021-10-19
  • 2022-03-07
  • 2022-12-23
  • 2021-09-22
  • 2022-12-23
  • 2022-12-23
  • 2022-02-03
猜你喜欢
  • 2021-05-08
  • 2021-11-29
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-01
  • 2021-11-23
相关资源
相似解决方案