一、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. Android 快速索引（城市列表和联系人）

    最近需要实现一个城市列表的快速索引功能.类似于联系人应用,根据姓名首字母快速索引功能. 要实现这个功能只需要解决两个问题:1.对列表进行分组(具有同一特征),并且能够快速定位到该组的第一项 2.右侧分 ...

  2. SpringBoot学习-第一章

    1.SpringBoot入门 开发环境:JDK1.8 开发工具:IDEA2017.3.1 1.简介: Spring Boot让我们的Spring应用变的更轻量化.比如:你可以仅仅依靠一个Java类来运 ...

  3. 使用IDEA 创建Maven项目，外加SSM框架

    使用idea 新创建项目 然后 新创建 java .resources 文件夹...... 图上是项目结构 java文件夹下的 文件夹 命名规范 com.nf147(组织名)+ oukele(作者) ...

  4. C/C++中动态内存分配

    代码段:用来存放程序执行代码的一块内存区域.这部分内存大小在程序运行前已经知道,通常属于只读,其中包括只读的字符串常量,不可改变 BBS段:用来存放存放程序中未初始化的全局变量及静态变量,属于静态内存 ...

  5. Redis 简介，安装，卸载

    一.Redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  6. 《图解 TCP-IP(第 5 版)》

    第一章 网络基础知识 计算机网络根据规模可以分为:广域网(WAN: Wide Area Network)和局域网(LAN: Local Area Network) 协议的标准化: 国际标准化组织(IS ...

  7. 【SQL SERVER】 搭建AlwaysON高可用组

    项目需要保障数据的高可用,于是可选的方案无非是Oracle集群. 传统的主从+心跳切换访问点以及SQL Server AlwaysOn这类方案.(//经验不多,了解和实践过的方案就这类,轻拍) Ora ...

  8. 阿里云ipv6安全组匹配所有ip的方法

    IPv4和IPv6通信彼此独立.您需要为ECS实例单独配置IPv6安全组规则. 操作步骤 登录ECS控制台. 在左侧导航栏,单击网络和安全 > 安全组. 找到目标安全组,然后单击配置规则. 单击 ...

  9. tensorflow学习笔记二：入门基础 好教程 可用

    http://www.cnblogs.com/denny402/p/5852083.html tensorflow学习笔记二:入门基础   TensorFlow用张量这种数据结构来表示所有的数据.用一 ...

  10. 应用安全-安全设备-Waf系列-软Waf-D盾

    安装 下载http://www.d99net.net/down/d_safe_2.1.5.2.zip 使用说明 http://www.d99net.net/News.asp?id=106 免杀 arr ...