通过jquery库扩展移动端‘长按触发’事件（模拟浏览器‘长按识别二维码’功能）

Rattenking

发布于 2021-01-29 16:03:28

1.4K0

发布于 2021-01-29 16:03:28

文章被收录于专栏：Rattenking

上一篇讲了如何通过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.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

效果图：