1、js代码

 //触摸开始事件，改变元素的样式

 function touchstart(e) {

     $(this).removeClass("touchend").addClass("touchstart");

     if (e.data.cancelBubble) {

         if (e.cancelBubble) {

             e.cancelBubble = true;

         }

         if (e.stopPropagation()) {

             e.stopPropagation();

         }

     }

 }

 //触摸结束事件，恢复元素样式

 function touchend(e) {

     $(this).addClass("touchend").removeClass("touchstart");

     if (e.data.cancelBubble) {

         if (e.cancelBubble) {

             e.cancelBubble = true;

         }

         if (e.stopPropagation()) {

             e.stopPropagation();

         }

     }

 }

 $.extend({

     //注册全局触摸事件，委托给document，只要在需要实现触摸效果的元素上加上 touchable类即可

     globalTouchable: function () {

         $.disableGlobalTouchable();

         $(document)

             .on("touchstart mousedown mouseenter", ".touchable", {}, touchstart)

             .on("touchend touchcancel mouseup mouseleave", ".touchable", {}, touchend);

         return this;

     },

     disableGlobalTouchable: function () {

         $(document)

             .off("touchstart mousedown mouseenter", ".touchable", touchstart)

             .off("touchend touchcancel mouseup mouseleave", ".touchable", touchend);

         return this;

     }

 });

 $.fn.extend(

 {

     /*

      * 启用匹配元素的触摸效果，

      *cancelBubble:

      *   是否取消事件冒泡，避免父元素出现触摸效果

      */

     touchable: function (cancelBubble) {

         $(this)

             .addClass("touchable")

             .off("ouchstart mousedown mouseenter", null, touchstart)

             .off("touchend touchcancel mouseup mouseleave", null, touchend)

             .on("touchstart mousedown mouseenter", null, { cancelBubble: cancelBubble }, touchstart)

             .on("touchend touchcancel mouseup mouseleave", null, { cancelBubble: cancelBubble }, touchend);

         return this;

         },

     /*

      *取消匹配元素的触摸效果

      */

     untouchable: function () {

         $(this)

             .off("ouchstart mousedown mouseenter",null, touchstart)

             .off("touchend touchcancel mouseup mouseleave", null, touchend);

         return this;

     },

 });

2、css代码

 .touchable{

     background-color:whitesmoke;

 }

 /*点击时颜色*/

 .touchable.touchstart{

     background-color:gainsboro;

 }

 /*淡出效果*/

 .touchable.touchend{

     transition:background-color ease-out 0.3s;

 }

3、使用示例

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <title>Touchable</title>

     <link href="~/css/touchable.css" rel="stylesheet" />

     <style>

         html, body {

             width: 100%;

             height: 100%;

         }

         body {

             display:flex;

             align-items:center;

             justify-content:center;

             flex-direction:column;

         }

         body > div {

             width: 60vw;

             height: 20vh;

             display:flex;

             align-items:stretch;

         }

         body > div > div {

             flex:1;

             border:solid 1px white;

             padding:2rem;

         }

         body > div > div > div {

             padding:2rem;

             height:100%;

             width:100%;

             background-color:green;

         }

         body > div > div > div >div{

             padding: 2rem;

             height: 100%;

             width: 100%;

             background-color:yellow;

         }

     </style>

 </head>

 <body>

     <div>

         <div class="touchable"></div>

         <div class="touchable"></div>

         <div class="touchable"></div>

     </div>

     <div>

         <div class="touchable"></div>

         <div class="touchable"></div>

         <div class="touchable"></div>

     </div>

     <div>

         <div class="touchable"></div>

         <div class="touchable"></div>

         <div class="touchable"></div>

     </div>

     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

     <script src="~/js/touchable.js?v=9"></script>

     <script>

         $.globalTouchable();

     </script>

 </body>

 </html>

效果图

jQuery拓展简易快速实现触摸效果的更多相关文章

  1. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  2. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  5. jQuery对json快速赋值

    jQuery对json快速赋值,重点在于将input的id取跟JSON同样的名称. <!DOCTYPE html> <html> <head lang="en& ...

  6. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  8. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

随机推荐

  1. 让SpringMVC Restful API优雅地支持多版本

    好久没有更新博客,难得有空,记录一下今天写的一个小工具,供有需要的朋友参考. 在移动APP开发中,多版本接口同时存在的情况经常发生,通常接口支持多版本,有以下两种方式: 1.通过不同路径区分不同版本 ...

  2. 基于layui和bootstrap搭建极简后台管理框架

    年前无聊,想自己搭建一个后台管理框架,对比了easyui.Extjs.H-ui.H+UI.layui几个框架,easyui和Extjs虽然功能强大但是界面实在是接受不了,H+UI和layuiAdmin ...

  3. windows搭建web服务器

    1.安装web管理工具 控制面板--->程序和功能--->打开或关闭功能 2.将internet信息服务中的所有选项全部勾上,并点击确定. 3.打开浏览器,输入http://localho ...

  4. 升级 phpStudy 中 MySQL 版本至 5.7.17

      由于本地用的集成环境是 phpStudy 2016,没有找到升级 MySQL 版本的选项,所以自己升级一下. 从官网上下载高版本的 MySQL :https://dev.mysql.com/dow ...

  5. 根据展示文字自适应 cell 高度，实现点击cell的伸缩扩展

    1.要根据展示的文字计算cell的高度, 再此给NSString写的延展的方法, 以此获取展示文字的高度 2.在自定义的cell中 声明属性和定义方法 注:在cell上初始化子控件,最好用代码写, 不 ...

  6. 通过读取配置文件，启动mongodb

    在实际的项目中,经常利用mongodb数据库做缓存,mongodb的并发性比较高,所以对于快速存储.读取信息有很多优点.在项目中对于第一次的数据请求会直接访问数据库,而对于获得的信息通常都会在此时刻存 ...

  7. 读《Linux Shell脚本攻略》(第2版) 总结

    前段时间读完了<Linux Shell脚本攻略>(第2版)这本书,给部分想读这本书的人分享下个人感受. 说下这本书的难度吧.纯新手或者只懂少部分编程知识的人,读起来还是有很大难度的.以我为 ...

  8. ICQ

    我一直都想编一个自己的聊天软件,像QQ那种:最近有时间我就自己编了一个.编写的过程中收获很大…… 现在拿出来跟大家分享,有兴趣的朋友可以和我交流交流. 先给大家看一下效果: 启动服务器: 再给大家看一 ...

  9. 剑指offer第四天

    25.复杂链表的复制 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的 ...

  10. Mac下VirtualBox共享文件夹设置

    环境:CentOS7.2最小化安装 步骤: 先安装必要软件包 yum install -y gcc gcc-devel gcc-c++ gcc-c++-devel make kernel kernel ...