1.在单击的时候采用延迟,双击的时候取消单机操作!
<script>
var timer = null;
$('a').on('click', function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log(22222)
}, 300); // 延迟300ms执行单击事件
});
// 双击输入框时可以输入学生姓名 双击事件
$('a').on('dblclick', function (ev) {
ev.stopPropagation();
clearTimeout(timer);
console.log(3333)
});
</script>
2.IOS双击事件的发生
var lastClickTime = 0;
var clickTimer;
document.getElementById('xxx').addEventListener('click', (event) => {
var nowTime = new Date().getTime();
if (nowTime - lastClickTime < 400) {
/*双击*/
lastClickTime = 0;
clickTimer && clearTimeout(clickTimer);
alert('双击');
} else {
/*单击*/
lastClickTime = nowTime;
clickTimer = setTimeout(() => {
alert('单击');
}, 400);
}
});
3.微信开发:解决IOS端下面的点击延迟问题:
2007年,苹果为了解决在Iphone这种小屏幕浏览器站点的问题,就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。这里推荐使用fastclick.js :https://github.com/ftlabs/fastclick
//在头部引入JS
<script type="text/javascript" src="/js/mobile/fastclick.js"></script>
//页面加载时,使用
$(function() {
FastClick.attach(document.body);
});
4.多点触控插件Hammer.js,用来解决移动端双手指外滑放大,内滑缩小等功能。https://github.com/hammerjs/hammer.js
- 如何阻止ios微信下双击屏幕向上滑的问题:摘录自https://segmentfault.com/q/1010000007337811
//解决ios双击页面上移问题
//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了
(function()
{
var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
var iLastTouch = null; //缓存上一次tap的时间
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
{
document.body.addEventListener('touchend', function(event)
{
var iNow = new Date()
.getTime();
iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
var delta = iNow - iLastTouch;
if (delta < 500 && delta > 0)
{
event.preventDefault();
return false;
}
iLastTouch = iNow;
}, false);
}
})();
//下面是国外coder给的解决方案
//http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads
(function($){
// Determine if we on iPhone or iPad
var isiOS = false;
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
isiOS = true;
}
$.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
var eventName, action;
delay = delay == null? 500 : delay;
eventName = isiOS == true? 'touchend' : 'click';
$(this).bind(eventName, function(event){
var now = new Date().getTime();
var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
var delta = now - lastTouch;
clearTimeout(action);
if(delta<500 && delta>0){
if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
onDoubleTapCallback(event);
}
}else{
$(this).data('lastTouch', now);
action = setTimeout(function(evt){
if(onTapCallback != null && typeof onTapCallback == 'function'){
onTapCallback(evt);
}
clearTimeout(action); // clear the timeout
}, delay, [event]);
}
$(this).data('lastTouch', now);
});
};
})(Zepto);
//usage:
$(selector).doubletap(
/** doubletap-dblclick callback */
function(event){
alert('double-tap');
},
/** touch-click callback (touch) */
function(event){
alert('single-tap');
},
/** doubletap-dblclick delay (default is 500 ms) */
);
//下面是国外coder给的解决方案--end
//解决ios双击网面上移问题--end
网友评论