一、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. webpack学习笔记二

    sourceMap 源代码与打包后的代码的映射关系.例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位 ...

  2. 如何在Ecplise调试之后恢复原来的界面

    在我们用Eclipse调试代码的时候,可以通过设置断点来调试,但是调试之后我们的界面会跟之前的不同,通过以下的方法可以让Eclipse的界面恢复成调试之前的样子. 在Ecplise中找到Window, ...

  3. window下启动redis服务

    ---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入“cmd”,回车 二,然后会进入cmd界面,直接运行命令r ...

  4. 5分钟让你知道什么是PKI

    转:https://www.cnblogs.com/jerain6312/p/8572841.html 前言 Public Key Infrastructure(PKI),中文叫做公开密钥基础设施,也 ...

  5. .Net Core入门与.Net需要注意的地方

    1.编码注册 Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); 否则抛出异常 'GB2312' is not a suppo ...

  6. 解决RHEL6 vncserver 启动 could not open default font 'fixed'错误.

    https://blog.csdn.net/silencegll/article/details/51320629

  7. 数据库缓存之Memcache知识点

    Memcache知识点总结: 一.Memcache安装及使用 参考地址:https://www.jb51.net/article/66525.htm 1.将下载的Memcache安装文件放到某盘下,如 ...

  8. 【adb真机查Log】Android Studio 3.X 找不到Android Device Monitor

    参考来源:https://blog.csdn.net/yuanxiang01/article/details/80494842 以下信息来源于Android Developers官网 Android设 ...

  9. fedora23使用Xwayland的gnome-shell

    gnome是桌面管理系统的名称, 包括gnome, kde, xfce等等 同时, gnome是旧的gnome 2 的桌面管理 在gnome 3中, 桌面管理系统叫做gnome shell. gnom ...

  10. Ajax，学习教程！

    一.什么是Ajax? 2005 年Jesse James Garrett 发表了一篇文章,标题为:“Ajax:A new Approach to Web Applications”.他在这篇文章里介绍 ...