一、touch.js
1、引用链接:
<script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"></script>
2、使用方式:
//加载事件
$(function () {
touch.on('.flows', 'hold tap doubletap', function (ev) {
alert("单击tap,双击doubletap,长按hold");
});
});
3、绑定多个并且参数传递:
//加载事件 $(function () { touch.on('.flows', 'hold', function (ev) { alert("uid:" + $(this).data("uid"));//获取data-属性 data-uid="<%#Eval("ID")%>" }); });
处理情景:
PC端有点击和双击事件，为兼容手机端不支持双击，采用长按事件代替。
二、点击复制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script> <title>复制按钮</title> </head> <body> 微信号：<span id="target">XXXXX</span> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn"> 点击复制 </button> </body> <script> $(document).ready(function(){ var clipboard = new Clipboard('#copy_btn'); clipboard.on('success', function(e) { alert("微信号复制成功",1500); e.clearSelection(); console.log(e.clearSelection); }); clipboard.on('error', function(e){ alert("复制失败"); console.log(e);//这里是你可以输入的内容样式 }); }); </script> </html>
单个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.js"></script> <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script> <title>复制按钮</title> </head> <body> <button class="btn" id="copy_btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> 复制 </button> </body> <script> $(document).ready(function(){ var clipboard = new Clipboard('#copy_btn'); clipboard.on('success', function(e) { layer.msg( '复制成功',{ time:1500, shade: 0.3 }); //取消所有选择的节点 e.clearSelection(); // 释放内存 //不刷新的情况下,只可以点击复制一次 //clipboard.destroy() }); clipboard.on('error', function(e){ layer.msg( '浏览器不支持复制功能，请手动复制',{ time:1500, shade: 0.3 }); //取消所有选择的节点 e.clearSelection(); // 释放内存 //不刷新的情况下,只可以点击复制一次 //clipboard.destroy() }); }); </script> </html>