通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
来源:互联网 发布:网购比价软件 编辑:程序博客网 时间:2024/05/22 01:58
上一篇讲了如何通过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:
https://rattenking.github.io/demo/15/index.html
下载demo:
http://download.csdn.net/download/m0_38082783/9985096
效果图:
阅读全文
0 0
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
- 移动端 jquery 长按触发移动事件 <升级版>
- 模拟移动端的长按事件
- 长按二维码识别
- jQuery手机长按触发事件
- PhotoSwipe长按事件,即不取消手机浏览器的长按事件,以达到弹出识别二维码、保存菜单
- 手机端js模拟长按事件(jQuery)
- Android的二维码功能实现以及长按识别二维码
- 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
- 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
- 长按二维码不识别
- 手机长按触发事件(网页端)
- 手机长按触发事件(网页端)
- 手机长按触发事件(网页端)
- 触发UIButton长按事件
- 触发UIButton长按事件
- 重磅!微信小程序开放长按识别二维码功能
- 生成二维码,长按识别二维码
- 动态规划介绍文章收藏
- 【技术贴收集】开源项目Html Agility Pack实现快速解析Html
- 表中字段值为NULL时,hibernate查询不会返回该字段
- Windows cmd 查看端口,杀进程
- Kotlin-->自定义评分控件RatingBar
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
- Oracle分组查询1——rullup
- 通过半平面交求多边形的核
- GStreamer播放媒体,实现Video Mute功能
- 关于layui数据表格的分页操作的学习笔记。
- SAP UI5初步结构分析研究(七)(番外篇)
- 吴恩达神经网络和深度学习课程自学笔记(二)之神经网络基础
- python文件和目录操作
- dom4j解析xml字符串时异常:org.dom4j.DocumentException: no protocol