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. Ling && Lambda

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. My97DatePicker选择两个日期范围不超过30天的demo

    需求 ExtJs下使用My97DatePicker对时间范围不超过30天进行选择. 关键点 使用全局变量. 对选择完的第一个日期进行逻辑判断.(我的逻辑能力还有待加强啊) 因为当选择了第一个框范围在超 ...

  3. 6.C++初步分析类

    面向对象的意义在于: -将日常生活中习惯的思维方式引入程序设计中 -将需求中的慨念直观的映射到解决方案中 -以模块为中心构建可复用的软件系统 -提高软件产品的可维护性和可扩展性 其中类和对象是面向对象 ...

  4. 标签（Label、JLabel）

    构造函数 Label( ) Label(String str) Label(String str, int how) 第一种形式生成一个空白标签:第二种形式生成一个包含由参数str所设定的字符串的标签 ...

  5. PHP 支持加解密的函数

    function encrypt($string,$operation,$key=''){ $key=md5($key); $key_length=strlen($key); $string=$ope ...

  6. CNN 卷积层输入Map大小计算

    对于输出的size计算: out_height=((input_height - filter_height + padding_top+padding_bottom)/stride_height ) ...

  7. 使用org.apache.commons.logging打日志注意事项

    使用方法:例如,protected final Log logger = LogFactory.getLog(getClass());if (logger.isDebugEnabled()) { lo ...

  8. AGC012 - E: Camel and Oases

    原题链接 题意简述 沙漠中有个排成一条直线的绿洲,一头储水量为的骆驼. 骆驼有两个操作: 走到距离在V以内的一个绿洲. 飞到任意一个绿洲,但V减少一半.V=0时不能飞. 问骆驼依次从每个绿洲出发,能否 ...

  9. linux 版本控制及rpm打包

    版本控制 subversion:是一个自由/开源的版本控制系统,在subversion管理下,文件和目录可以超越时空subversion允许你数据恢复到早期版本,或者是检查数据修改历史许多人将版本控制 ...

  10. burpsuite + sqlmap 日志导出批量扫描

    http://lcx.cc/?i=4207   在burpsuite中options -->misc-->logging中选择要记录的日志来源: 一般是proxy request: 生成的 ...