为了适配移动端,图片加入touchstart,touchend,并加了 e.preventDefault() 屏蔽默认菜单。
然而突然发现移动端图片的链接无响应了,PC端没问题。
而且功能需要区分点击和长按。
原生js如何判断移动端的tap,dbltap,longtap?点击,双击,长按的识别 - 简书
通过计算 touchstart 和 touchend 的时间间隔来区分能解决问题。
(function(i){
var t, time;
img.addEventListener('touchstart', function(e){
e.preventDefault();
t = e.touches[0];
time = Date.now();
});
img.addEventListener('touchend', function(e){
var dt = Date.now() - time;
if (dt < 300)
window.location.href = json[i].website;
else {
menu.style.display = 'block';
menu.style.left = t.pageX + 'px';
menu.style.top = t.pageY + 'px';
id = i;
title1 = json[i].title;
website1 = json[i].website;
}
});
})(i);