一、touch.js与点击复制
JS 复制 点击 touch
2023-09-11 14:19:05 时间
一、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>
相关文章
- js史上最简单的数组合并去重排序
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(coolShow.js)图片旋转动画特效
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
- JS框架_(JQuery.js)动画效果鼠标跟随
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(Vue.js)带有星期日期的数字时钟
- baguetteBox.js响应式画廊插件(纯JS)
- JS 测试网络速度与网络延迟
- JS实现 键盘操作
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [Node.js] Manage Configuration Values with Environment Variables
- 站点js屏蔽他人广告
- JS代码复用
- 新手学EasyUi+JS----ComboBox 级联
- [Cycle.js] From toy DOM Driver to real DOM Driver
- SAP UI5应用中的component-preload.js在Netweaver上的存储
- paip.提升效率--数据绑定到table原理和流程Angular js jquery实现
- 华为OD机试 - 统计文本数量(Java & JS & Python)
- js鼠标放图片上==放大镜显示效果demo效果示例(整理)
- three.js(JS 三维模型库)介绍和入门
- js 常用正则表达式
- js 实现文本选中与复制
- js实现 delay 和 sleep函数
- golang里面调用js
- js深度复制
- 【JS高级】js面向对象三大特性之多态_07
- 【JS高级】js之正则相关函数以及正则对象_02
- 华为校招机试 - 求和(Java & JS & Python)
- js点击当前复制内容demo效果示例(整理)
- JS将阿拉伯数字翻译成中文的大写数字、JS将数字转换为大写金额(整理)
- jquery分页插件pagination.js的使用