上一篇讲了如何通过qrcode.js解析二维码（图片），那么现在我们要实现的功能就是最开始的要求'长按识别二维码'这个功能！解析部分的难题我们已经解决，那么现在需要解决的就是模拟‘长按触发事件’这个功能，该功能通过一些参考资料，采用的是给jquery的扩展一个触发事件。
解析二维码讲解
1，扩展触发事件代码
代码语言：javascript复制$.fn.longPress = function (fn) {
let timer = null;
let $this = this;
for (let i = 0; i < $this.length; i ) {
$this[i].addEventListener('touchstart', function (event) {
timer = setTimeout(fn, 600);
}, false);
$this[i].addEventListener('touchend', function (event) {
clearTimeout(timer);
}, false);
}
}注意：此处我采用的是开始触发touchstart事件的600ms后触发长按事件，这里的时间长短可以根据需求来自己定义！
2，阻止浏览默认事件的触发
代码语言：javascript复制document.getElementById('showImg').ontouchstart = function (e) { e.preventDefault(); };注意此处不能采用：
代码语言：javascript复制window.ontouchstart = function (e) { e.preventDefault(); };原因是：部分移动端浏览器会将页面中其他的事件同时都阻止，web端浏览器在谷歌测试没有问题！所以此处采用只是阻止当前要长按的图片的浏览器默认事件。但是即便如此还是遇到一些情况：
（1），进入浏览器后你直接长按依然会触发浏览器默认事件，如果等一下再去长按就不会触发浏览器的默认事件，会直接触发我们自定义的事件。
解决办法：将该段组织浏览器默认事件的代码直接放到该元素的后边，当然页面如果内容很多，一般不会出现该情况！
（2），苹果手机的浏览器默认事件没有阻止。
3，给图片绑定触发事件
代码语言：javascript复制function alertChange(param){
if(param === 1){
getUrl(document.getElementById('showImg'),'img-url');
}else if(param === 2){
analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){alert(url);});
}else if(param === 3){
analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){window.kk = url;});
}else if(param === 4){
analyticCode.getUrl('img-url',document.getElementById('showImg'),function(url){window.open(url);});
}else{
return;
}
$('#addDiv').remove();
}
$('#showImg').longPress(function(){
let str = '<div id="addDiv" style="position:absolute;top:110px;left:50px;z-index:10;background:#000;color:#fff;font-size:16px;text-align:center;width:180px;border-radius:5px;">'
'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(1)">识别二维码</p>'
'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(2)">弹出地址</p>'
'<p style="border-bottom:1px solid #fff;margin:0;height:50px;line-height:50px;" onclick="alertChange(3)">当前窗口打开地址</p>'
'<p onclick="alertChange(4)">新窗口打开地址</p>'
'</div>';
$('#analytic').append(str);
});效果demo:
https://rattenking.github.io/demo/15/index.html
下载demo:
http://download.csdn.net/download/m0_38082783/9985096
效果图：
