重载jquery on方法实现click 在移动端 快速响应
click事件在移动设备上 是最后个执行的 移动端click事件会比touchstart事件慢
移动设备 元素上事件执行顺序是 touchstart > touchmove > touchend > click{mousedown->mousemove->mouseup}
jquery 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
;(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);
};
}
})();
用
$('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);
};
})();
on方法还是原来的用法 如果 on的是click事件 那么在移动平台上会被替换成touchstart以迅速响应操作
click事件在移动设备上 是最后个执行的 移动端click事件会比touchstart事件慢
移动设备 元素上事件执行顺序是 touchstart > touchmove > touchend > click{mousedown->mousemove->mouseup}
jquery 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
;(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);
};
}
})();
用
$('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);
};
})();
on方法还是原来的用法 如果 on的是click事件 那么在移动平台上会被替换成touchstart以迅速响应操作
尊贵的董事大人
英文标题不为空时 视为本栏投稿
需要关键字 描述 英文标题