一、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. hdu3714 Error Curves

    题目: Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  2. Linux 设置端口转发

    ps -ef | grep 10020     --查询10020端口是否被使用kill -9 86971     --结束使用10020端口的进程 ssh -C -f -N -g -L 18889: ...

  3. 【30分钟学完】canvas动画|游戏基础(1)：理论先行

    前言 本文虽说是基础教程,但这是相对动画/游戏领域来说,在前端领域算是中级教程了,不适合前端小白或萌新.阅读前请确保自己对前端三大件(JavaScript+CSS+HTML)的基础已经十分熟悉,而且有 ...

  4. Hypermesh中弹簧单元设置

    1D >> springs 单元类型 CBUSH1D 单元属性 PBUSH1D

  5. SeaJS基本开发原则

    SeaJS基本开发原则在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则.使用SeaJS开发JavaScript的基本原则就是:一切皆为模块.引入SeaJS后,编写JavaScr ...

  6. tjuthesis 图标题左对齐修改办法

    图标题格式默认是居中的. 将 format 文件里定义图表标题样式部分的 \centering 删去,可变为左对齐. 如下: %% 定制浮动图形和表格标题样式\makeatletter\long\de ...

  7. delphi开发实例：保存字体设置的方法

    http://blog.csdn.net/delphi308/article/details/9906147 delphi开发实例:保存字体设置的方法 2013-08-11 22:37 446人阅读  ...

  8. Jmeter+ SeureCRT + Pinpoint

    1.环境配置 [相关操作] 下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  9. [LeetCode] 834. Sum of Distances in Tree

    LeetCode刷题记录 传送门 Description An undirected, connected treewith N nodes labelled 0...N-1 and N-1 edge ...

  10. js模块化编程之CommonJS和AMD/CMD！

    有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套! 于是下面三个模块 ...