为jQuery添加Webkit的触摸的方法分享

2020-05-24 21:29:56易采站长站整理


e.originalEvent.touches[0].pageX可以判断触摸情况。开发时需要自行记录触摸事件的情况再作判断。


原生最优
请尽量不要尝试用大量的JS方法触发来实现一些本身没有的样式效果。


比如元素静态不动,理应用position:fix;来实现,但许多开发人员会是用js不断刷新其控件位置来解决。


这种实现方式放在触摸设备上,一般只会出现两种情况:


1.卡死你
2.页面被冻结,冻结技术后突然发现事件全部执行完了(原因如上,浏览器会集中UI线程的资源给内核优先)
一般移动设备的屏幕有效刷新率不过30Hz,精简指令集的CPU本身也会慢一些,加上大部分的移动设备都是…Android…


所以,性能必须尽量依赖原生提供的方法。一些Hack和Cover的方法对方受不了。


如何使用
当时因为兼职交付好像就一两周的事情,所以没有把代码写得太好,不过还是能用。大致的用法跟普通的jQuery事件一致,命名和实现方面确实还值得商榷:



$(‘.sign .usernametip’).tapOrClick(function () {
    $(this).css(‘visibility’, ‘hidden’);
    $(‘.sign .username’).focus();
});


跟项目中的很多事情一样,许多事情看似简单,但实际上却会出现各种各样的问题。


触摸事件并不是简单地便可兼容,单实现了功能外还需要顾虑最实质的问题——特定的交互模式。


比如触摸中需要隐藏许多空间以留有更多的空间给有限的用户屏幕;许多本身以点击切换的元素在触摸的最佳体验中应该改成滑动切换,甚至要顾虑不同的滑动情况;触摸各事件的停留事件不同可能代表不同的操作,需要进行判别……


虽然知道jQuery Mobile等已经有比较完善的各种方法,不过就是忍不住自己实现一下看看。