相思资源网 Design By www.200059.com

本文实例讲述了jQuery基于$.ajax设置移动端click超时处理方法。分享给大家供大家参考,具体如下:

这里介绍jquery click事件如何在移动端自动转换成touchstart事件。

因为移动端click事件会比touchstart事件慢几拍

移动设备某个元素上事件执行顺序是:

touchstart

touchmove

touchend

click{mousedown->mousemove->mouseup}

click事件在移动设备上虽然会识别但却是最后一个执行的,所以如果不把click事件换成touchstart事件的话,就可能造成延时导致交互上也慢了几拍

所以在移动端最好把click事件换成touchstart事件。

那么如何添加事件比较简单呢.

于是乎有了以下这种写法:

var handle = function (e) {
  e.preventDefault(); // 阻止浏览器默认行为
  alert('fuck world');
}
$('body').on('touchstart mousedown', handle );

这样在pc端浏览器上面alert只执行一次,触发的事件是mousedown

在ios设备safari浏览器上面alert也只执行一次,触发的事件是touchstart

为什么只执行一次?

秘密在于当执行的是touchstart后,preventDefault掉了后面的click就不执行了,“非常完美”.

^_^! 一如既往的android设备蛋疼是必须的,测试发现除qq浏览器外其它浏览器都会alert两次

也就是说touchstart和mousedown的handle函数都执行了, 似乎是e.preventDefault()没有起作用。具体原因不明...

因为要兼容,所以就没办法了只能通过判断是否支持touch事件来分别添加事件了..

那就扩展一个jquery方法插件吧仿一个on方法的插件方法比如名称为quickOn,(如果你连on方法怎么用都不知道,那你就走吧,离开这里...)

;(function(){
  var isTouch = ('ontouchstart' in document.documentElement) "htmlcode">
$('body').quickOn('click', function(){
 alert('fuck world') ;
})

额。。后来想想,为什么不直接重载jquery的on方法呢??

来吧,试试

;(function(){
  var isTouch = ('ontouchstart' in document.documentElement) "_blank" href="https://www.jb51.net/Special/93.htm">jquery中Ajax用法总结》、《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

标签:
jQuery,ajax,设置,移动端,click,超时

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jQuery基于$.ajax设置移动端click超时处理方法”

暂无jQuery基于$.ajax设置移动端click超时处理方法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。