重载jquery on方法实现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) ? 'touchstart' : 'click';
    　　if(!$.fn.quickOn){
            $.fn.quickOn= function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return $.fn.on.apply(this, arguments);    
            };
        }
　　})();

 

quickOn虽然名字尴尬了一点，可是能用，例如：

 

$('body').quickOn('click', function(){
    alert('fuck world') ;
})

 

额。。后来想一想，为何不直接重载jquery的on方法呢？？

来吧，试试

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;
            $.fn.on = function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return _on.apply(this, arguments); 
            };
    })();

这样暴力的来那么一下后，mmm....，on方法仍是原来的用法，但若是你on的是click事件，那么在移动平台上会被替换成touchstart以迅速响应操做。

成功！！！

 

特别注意：

 

经过重载on方法虽然很酷，可是因为响应速度快了，因此有时候也有麻烦，好比当你手指在滚动屏幕时触碰到添加了方法的元素上马上就会有反应从而容易产生误操做

 

测试的手机有限，因此方法靠不靠谱，同窗，请慎用。

 

 

 

========================================================

 

转载处请注明：博客园偷饭猫willian12345@126.com