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. "_OBJC_CLASS_$_MAMapServices", referenced from: 的问题修复

    今天将高德地图集成到ios模拟器编译出现了一个错误 Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_MAMapServic ...

  2. Hive metastore源码阅读（一）

    不要问我为什么,因为爱,哈哈哈哈...进入正题,最近做项目顺带学习了下hive metastore的源码,进行下知识总结. hive metastore的整体架构如图: 一.组成结构: 如图我们可以看 ...

  3. dnsmasq 做 DHCP 服务器

    /etc/dnsmasq.conf #DNS服务器的地址,就是我的热点的地址 listen-address=192.168.1.1 #设置DHCP分配的地址范围和时间 dhcp-range=192.1 ...

  4. Windows 桌面和文件夹的右键->打开命令行窗口

    Windows 桌面和文件夹的右键->打开命令行窗口 1.先按下shift,再点鼠标右键运行CMD,(不是管理员权限) 上图是我已经加了右键的,并且 系统设置了  ps代替cmd,所以是“在此处 ...

  5. C控制语句：分支和跳转

    小技巧:程序return前加个getchar();可以让程序停住.%%可以打印使printf()中打印出%号 #include<stdio.h>#define SPACE ''int ma ...

  6. 数据与C

    //以十进制.八进制和十六进制输出100,加入#会显示前缀#include<stdio.h>int main(){ int x = 100; printf("dec = %d; ...

  7. JVM性能监控与故障处理命令汇总（jps、jstat、jinfo、jmap、jhat、jstack）

    给一个系统定位问题的时候,知识.经验是关键基础,数据是依据,工具才是运用知识处理数据的手段 使用适当的虚拟机监控和分析的工具可以加快我们分析数据.定位解决问题的速度,本文主要介绍了几款服 务器上常用的 ...

  8. UVA - 10285 Longest Run on a Snowboard （线性DP）

    思路:d[x][y]表示以(x, y)作为起点能得到的最长递减序列,转移方程d[x][y] = max(d[px][py] + 1),此处(px, py)是它的相邻位置并且该位置的值小于(x, y)处 ...

  9. Luogu P1596 [USACO10OCT]湖计数Lake Counting

    题目描述 Due to recent rains, water has pooled in various places in Farmer John's field, which is repres ...

  10. 浏览器兼容的JS写法总结

    一.元素查找问题 1. document.all[name]   (1)现有问题:Firefox不支持document.all[name]   (2)解决方法:使用getElementsByName( ...