一、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. Qt Creator 启动失败 可能的解决办法

    用了一段时间Qt Creator莫名的打开失败   重装一遍,仍然不行: 网上搜到解决办法:删除 ~\AppData\Roaming\QtProject文件夹. linux下:~是/home/Your ...

  2. [BZOJ3236][AHOI2013]作业：树套树/莫队+分块

    分析 第一问随便搞,直接说第二问. 令原数列为\(seq\),\(pre_i\)为\(seq_i\)这个值上一个出现的位置,于是可以简化询问条件为: \(l \leq i \leq r\) \(a \ ...

  3. [CERC2016]:凸轮廓线Convex Contour（模拟+数学）

    题目描述 一些几何图形整齐地在一个网格图上从左往右排成一列.它们占据了连续的一段横行,每个位置恰好一个几何图形.每个图形是以下的三种之一:$1.$一个恰好充满单个格子的正方形.$2.$一个内切于单个格 ...

  4. Mapreduce报错：Split metadata size exceeded 10000000

    报错信息: Failure Info:Job initialization failed: java.io.IOException: Split metadata size exceeded 1000 ...

  5. C++返回栈上的数组（局部变量）问题探索

    char* teststr() { char s[] = "hello"; return s; } void main() { char* str = teststr(); ]; ...

  6. leetcode-mid-Linked list-160 Intersection of Two Linked Lists-NO

    mycode 用了反转链表,所以不符合题意 参考: 思路: 1 先让长的链表先走,然后相同长度下看是否相遇 class Solution(object): def getIntersectionNod ...

  7. ORACLE内存管理之ASMM AMM

    ORACLE ASMM ORACLE AMM ASMM转换至AMM AMM转换至ASMM

  8. 杂项-站点：SharePoint

    ylbtech-杂项-门户站点:SharePoint SharePoint Portal Server 2003 是一个门户站点,使得企业能够开发出智能的门户站点,这个站点能够无缝连接到用户.团队和知 ...

  9. error: exportArchive: You don’t have permission to save the file “HelloWorld.ipa” in the folder “HelloWorld”.

    成功clean环境和生成archive文件之后,最后一步导出ipa包,遇到了权限问题: you don’t have permission to save the file “HelloWorld.i ...

  10. 每天一个Linux命令（37）kill命令

          Linux中的kill命令用来终止指定的进程(terminate a process)的运行. kill可将指定的信息送至程序.预设的信息为SIGTERM(15),可将指定程序终止.   ...