重载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以迅速响应操作。