zoukankan      html  css  js  c++  java
  • 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)

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

    效果图:


    其他

    [我的博客,欢迎交流!](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)

  • 相关阅读:
    java+opencv实现图像灰度化
    java实现高斯平滑
    hdu 3415 单调队列
    POJ 3368 Frequent values 线段树区间合并
    UVA 11795 Mega Man's Mission 状态DP
    UVA 11552 Fewest Flops DP
    UVA 10534 Wavio Sequence DP LIS
    UVA 1424 uvalive 4256 Salesmen 简单DP
    UVA 1099 uvalive 4794 Sharing Chocolate 状态DP
    UVA 1169uvalive 3983 Robotruck 单调队列优化DP
  • 原文地址:https://www.cnblogs.com/linewman/p/9918542.html
Copyright © 2011-2022 走看看