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. u-boot核心初始化

    异常向量表:异常:因为内部或者外部的一些事件,导致处理器停下正在处理的工作,转而去处理这些发生的事件.ARM Architecture Reference Manual p54页.7种异常的类型:Re ...

  2. java使用*导包的性能

    项目中切换到IDEA工具,使用Git提交代码之后在comments中被吐槽了.事情是这样的原有的导入包被IDEA优化了,譬如java.util.Set, java.util.Map, ... 会被优化 ...

  3. 洛谷P1879 [USACO06NOV]玉米田Corn Fields【状压DP】题解+AC代码

    题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ...

  4. img alt与title的区别

    前端 alt是图片加载不出来时候,对图片的文本替代 title 是鼠标放在图片上时,对图片的进一步说明 seo 搜索引擎对图片意思的理解主要靠 alt

  5. python爬取快手视频 多线程下载

    就是为了兴趣才搞的这个,ok 废话不多说 直接开始. 环境: python 2.7 + win10 工具:fiddler postman 安卓模拟器 首先,打开fiddler,fiddler作为htt ...

  6. 每个前端开发者必会的 20 个 JavaScript 面试题

    JavaScript 未声明变量直接使用会抛出异常:var name is not defined,如果没有处理异常,代码就停止运行了.但是,使用typeof undeclared_variable并 ...

  7. 自定义JpaUtil,快速完成Hql执行逻辑(一)

    这段时间学习Spring Data JPA功能模块.Java持久性API(简称JAP)是类和方法的集合,以海量数据关系映射持久并存储到数据库,这是由Oracle公司提供方案技术.在JAVA社区,深受爱 ...

  8. Win10 部署 依赖 NET3.5 项目，报错 无法安装 NET3.5 ，该如何解决？

    下载 NetFx3.cab Cab 安装包 拷贝 NetFx3.cab 文件至 C:\Windows 目录 打开命令行窗口(管理员权限) 输入以下内容: dism /online /Enable-Fe ...

  9. uva1471 二叉搜索树

    此题紫书上面有详细分析,关键是运用Set优化实现O(nlgn)复杂度 AC代码: #include<cstdio> #include<set> #include<algo ...

  10. CompletableFuture CompletableFuture.supplyAsync 异常处理

    CompletableFuture 异常处理completeExceptionally可以把异常抛到主线程 /** * User: laizhenwei * Date: 2018-01-30 Time ...