上一篇講了如何通過qrcode.js解析二維碼（圖片），那麼現在我們要實現的功能就是最開始的要求'長按識別二維碼'這個功能！解析部分的難題我們已經解決，那麼現在需要解決的就是模擬‘長按觸發事件’這個功能，該功能通過一些參考資料，採用的是給jquery的擴充套件一個觸發事件。

1，擴充套件觸發事件程式碼

$.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，阻止瀏覽預設事件的觸發

document.getElementById('showImg').ontouchstart = function (e) { e.preventDefault(); };

注意此處不能採用：

window.ontouchstart = function (e) { e.preventDefault(); };

原因是：部分移動端瀏覽器會將頁面中其他的事件同時都阻止，web端瀏覽器在谷歌測試沒有問題！所以此處採用只是阻止當前要長按的圖片的瀏覽器預設事件。但是即便如此還是遇到一些情況：

（1），進入瀏覽器後你直接長按依然會觸發瀏覽器預設事件，如果等一下再去長按就不會觸發瀏覽器的預設事件，會直接觸發我們自定義的事件。

解決辦法：將該段組織瀏覽器預設事件的程式碼直接放到該元素的後邊，當然頁面如果內容很多，一般不會出現該情況！

（2），蘋果手機的瀏覽器預設事件沒有阻止。

3，給圖片繫結觸發事件

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.location.href = 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:

下載demo:

效果圖：

其他

[我的部落格，歡迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN部落格，歡迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程式專欄](https://blog.csdn.net/column/details/18335.html)

[前端筆記專欄](https://blog.csdn.net/column/details/18321.html)

[微信小程式實現部分高德地圖功能的DEMO下載](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程式實現MUI的部分效果的DEMO下載](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程式實現MUI的GIT專案地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程式例項列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端筆記列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[遊戲列表](http://blog.csdn.net/m0_38082783/article/details/79035621)