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

一、touch.js的更多相关文章

  1. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

  2. 百度touch的手势框架，touch.js

    今天,随便搜搜看到了一个新的手势库,也许能让我为现在使用者的hammer.js的手势库带来的烦恼而消除. 它是百度团队开发的,现在由百度云Clouda进行维护. 官网   http://touch.c ...

  3. zepto的touch.js左右滑动存在一些问题，用百度的touch.js代替

    这几天用zepto想写一个移动端的活动,在实现左右滑动触发动画时,发现zepto的touch.js在ios的微信上有问题. 问题描述:左右滑动时如果手指没有一直跟频幕贴着(在手机上滑动时,如果手指不是 ...

  4. touch.js——常见应用操作

    touch.js--常见应用操作 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时 ...

  5. touch.js下载使用方式

    touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...

  6. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  7. touch.js 手机端的操作手势

    使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.

  8. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  9. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  10. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

随机推荐

  1. Seata简单介绍及其原理(一)

    Seata 是什么? Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的 ...

  2. 前端HTTP缓存

    Web 缓存大致可以分为:数据库缓存.服务器端缓存(代理服务器缓存.CDN 缓存).浏览器缓存.其中前端比较关心的是浏览器缓存,包括今天要说的HTTP缓存和前面说过的cookie.localStora ...

  3. D. White Lines

    D. White Lines 给定一个$n\times n$的$WB$矩阵,给定一个$k*k$的能把$B$变成$W$的橡皮擦,求橡皮擦作用一次后,全为$W$的行.列总数最大值 前缀和差分 #inclu ...

  4. 在centos上配置环境

    1.   安装wget [root@localhost ~]# yum -y install wget 2.   在oneinstack官网配置安装环境 wget http://mirrors.lin ...

  5. [django]上下文管理器

    上下文管理器django提取context中的数据去供模板调用 需求: 所有的页面都需要一个特定的变量 本质: python函数 , 接收一个HttpRequest对象的参数 , 且返回的必须是一个字 ...

  6. Spring Data JPA开发中遇到的问题1：org.hibernate.hql.internal.ast.QuerySyntaxException: DispatchShift is not mapped

    org.hibernate.hql.internal.ast.QuerySyntaxException: T_D_SHIFT_DISPATCH is not mapped 错误原因: 没有映射到表,经 ...

  7. this._super()

    https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/ https://api.jqueryui.com/jquery ...

  8. zabbix主动、被动TCP连接过程

    zabbix主动.被动TCP连接过程 https://blog.csdn.net/u010668387/article/details/79460183

  9. java设置RabbitMQ的消费处理出现：ConditionalRejectingErrorHandler : Execution of Rabbit message listener failed.

    WARN 7868 --- [cTaskExecutor-1] s.a.r.l.ConditionalRejectingErrorHandler : Execution of Rabbit messa ...

  10. python实现格式化输出9*9乘法表

    # python 9*9 乘法表 for i in range(1,10): for j in range(1,i+1): print("%s*%s=%s"%(i,j,i*j),e ...