一、touch.js与点击复制

一、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>