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. Windows Server 2016-WinSer2016 Active Directory新增功能

    Windows Server 2016 Active Directory 域服务 (AD DS)新增很多功能用来提升Active Directory域及组织环境安全等,并帮助他们面向云的部署或混合部署 ...

  2. 插上腾飞的翅膀：为asp.net core添加protobuf支持

    没时间解释了,快上车. 通过NuGet获取Zaabee.AspNetCoreProtobuf Install-Package Zaabee.AspNetCoreProtobuf 在Startup.cs ...

  3. centos java环境搭建

    我个人配置的是阿里云centos 7.4 64bit 不存在openjdk 看下面内容的情况下看是否存在openjdk java -version 如果返回java版本值,则存在openjdk,需要卸 ...

  4. mybatis自动生成mapper,dao映射文件

    利用Mybatis-Generator来帮我们自动生成mapper.xml文件,dao文件,model文件. 1.所需文件 关于Mybatis-Generator的下载可以到这个地址:https:// ...

  5. 听闰土大话前端之ES6是怎么来的

    前言 相信做前端的朋友没有不知道ECMAScript6的,都知晓ES6新增了不少新的特性,但是你知道ES6是怎么来的吗?今天就让闰土来带大家大话ES6的前世今生.当然了,这篇文章会以扫盲为主,科普为辅 ...

  6. js的call和apply拾遗

    一.产生背景 1. JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 2.正因为上下文的不同所以call 和 apply 都是为了改变某个函数运行 ...

  7. NTP 时间同步协议

    http://www.faqs.org/rfcs/rfc1305.html port:123

  8. RotatedRect 类的用法

    RotatedRect 以 Emgu.CV.Structure 为命名空间. 表示带有旋转角度的矩形. 结构说明 普通矩形的基本结构

  9. 【BZOJ3993】 星际战争

    Time Limit: 1000 ms   Memory Limit: 128 MB Description  3333年,在银河系的某星球上,X军团和Y军团正在激烈地作战.在战斗的某一阶段,Y军团一 ...

  10. JVM笔记4-对象的创建

    1.对象的创建过程: 1.new 类名 2.根据new的参数在常量池中定位一个类的符号的引用. 3.如果没找到这个符号的引用,说明类还没有被加载.则进行类的加载,解析和初始化 4.虚拟机为对象分配内存 ...