AJax技术

php与ajax上传头像实现实例(2)

字号+ 作者:H5之家 来源:H5之家 2016-07-02 14:00 我要评论( )

方案一:来得很直接github上有个fastclick可以完美解决 方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault() 方案三:延迟一定的时间(300ms+)来处理事件 理论上上面的方法可以完美的解决tap

方案一:来得很直接github上有个fastclick可以完美解决
方案二:用touchend代替tap事件并阻止掉touchend的默认行为preventDefault()
方案三:延迟一定的时间(300ms+)来处理事件
理论上上面的方法可以完美的解决tap的点透问题,如果真的倔强到不行,用click

 
首先方案一、方案二,要么引入一个库,要么替换掉tap事件,繁琐,头疼。方案三,点击延迟也不太好吧,着急点的用户还以为自己没点上呢,另外延迟300ms在IOS上是不够的,400ms是个理想值。

 
【终极方案】(自己可以依照自己的需求进行扩展):

原理就是:用户点击的时候“弹出”一个顶层DIV,屏蔽掉所有事件传递,然后定时自动隐藏。

 代码如下 复制代码

CSS:

<style type="text/css">
 /*Touch Fix*/
 #touchFix{visibility: hidden;width: 100%;height: 100%;position: absolute;left: 0px;top: 0px;z-index: 9999;}
</style>
JS:

<script type="text/javascript">
 var touchFixBox=$('#touchFix');

 //Touch Fix Event for Android
 var touchFix=(function(){
  var show=function(callback){
   touchFixBox.css('visibility','visible');
   if(typeof callback=='function'){
    callback();
   }
  }
  var hide=function(callback){
   setTimeout(function(){
    touchFixBox.css('visibility','hidden');
    if(typeof callback=='function'){
     callback();
    }
   },400);
  }
  var auto=function(callback){
   show();
   hide(callback);
  }
  return {
   show:show,
   hide:hide,
   auto:auto
  }
 }());
</script>

没有了

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax框架 Prototype 1.6.1 发布

    Ajax框架 Prototype 1.6.1 发布

    2016-07-02 15:00

  • CORS解决ajax跨域问题

    CORS解决ajax跨域问题

    2016-07-02 13:00

  • jQuery 學習心得筆記 (5) Ajax (下) ericsk.net

    jQuery 學習心得筆記 (5) Ajax (下) ericsk.net

    2016-06-30 11:05

  • Ajax关于readyState(状态值)和status(状态码)的研究

    Ajax关于readyState(状态值)和status(状态码)的研究

    2016-06-28 17:00

网友点评
/