jQuery拓展简易快速实现触摸效果
1、js代码
1 //触摸开始事件，改变元素的样式 2 function touchstart(e) { 3 $(this).removeClass("touchend").addClass("touchstart"); 4 if (e.data.cancelBubble) { 5 if (e.cancelBubble) { 6 e.cancelBubble = true; 7 } 8 if (e.stopPropagation()) { 9 e.stopPropagation(); 10 } 11 } 12 } 13 //触摸结束事件，恢复元素样式 14 function touchend(e) { 15 $(this).addClass("touchend").removeClass("touchstart"); 16 if (e.data.cancelBubble) { 17 if (e.cancelBubble) { 18 e.cancelBubble = true; 19 } 20 if (e.stopPropagation()) { 21 e.stopPropagation(); 22 } 23 } 24 } 25 $.extend({ 26 //注册全局触摸事件，委托给document，只要在需要实现触摸效果的元素上加上 touchable类即可 27 globalTouchable: function () { 28 $.disableGlobalTouchable(); 29 $(document) 30 .on("touchstart mousedown mouseenter", ".touchable", {}, touchstart) 31 .on("touchend touchcancel mouseup mouseleave", ".touchable", {}, touchend); 32 return this; 33 }, 34 disableGlobalTouchable: function () { 35 $(document) 36 .off("touchstart mousedown mouseenter", ".touchable", touchstart) 37 .off("touchend touchcancel mouseup mouseleave", ".touchable", touchend); 38 return this; 39 } 40 }); 41 $.fn.extend( 42 { 43 /* 44 * 启用匹配元素的触摸效果， 45 *cancelBubble: 46 * 是否取消事件冒泡，避免父元素出现触摸效果 47 */ 48 touchable: function (cancelBubble) { 49 $(this) 50 .addClass("touchable") 51 .off("ouchstart mousedown mouseenter", null, touchstart) 52 .off("touchend touchcancel mouseup mouseleave", null, touchend) 53 .on("touchstart mousedown mouseenter", null, { cancelBubble: cancelBubble }, touchstart) 54 .on("touchend touchcancel mouseup mouseleave", null, { cancelBubble: cancelBubble }, touchend); 55 return this; 56 }, 57 /* 58 *取消匹配元素的触摸效果 59 */ 60 untouchable: function () { 61 $(this) 62 .off("ouchstart mousedown mouseenter",null, touchstart) 63 .off("touchend touchcancel mouseup mouseleave", null, touchend); 64 return this; 65 }, 66 });
2、css代码
1 .touchable{ 2 background-color:whitesmoke; 3 } 4 /*点击时颜色*/ 5 .touchable.touchstart{ 6 background-color:gainsboro; 7 } 8 /*淡出效果*/ 9 .touchable.touchend{ 10 transition:background-color ease-out 0.3s; 11 }
3、使用示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width" /> 5 <title>Touchable</title> 6 <link href="~/css/touchable.css" rel="stylesheet" /> 7 <style> 8 html, body { 9 width: 100%; 10 height: 100%; 11 } 12 13 body { 14 display:flex; 15 align-items:center; 16 justify-content:center; 17 flex-direction:column; 18 } 19 body > div { 20 width: 60vw; 21 height: 20vh; 22 display:flex; 23 align-items:stretch; 24 } 25 body > div > div { 26 flex:1; 27 border:solid 1px white; 28 padding:2rem; 29 } 30 body > div > div > div { 31 padding:2rem; 32 height:100%; 33 width:100%; 34 background-color:green; 35 } 36 body > div > div > div >div{ 37 padding: 2rem; 38 height: 100%; 39 width: 100%; 40 background-color:yellow; 41 } 42 </style> 43 44 </head> 45 <body> 46 <div> 47 <div class="touchable"></div> 48 <div class="touchable"></div> 49 <div class="touchable"></div> 50 </div> 51 <div> 52 <div class="touchable"></div> 53 <div class="touchable"></div> 54 <div class="touchable"></div> 55 </div> 56 <div> 57 <div class="touchable"></div> 58 <div class="touchable"></div> 59 <div class="touchable"></div> 60 </div> 61 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 62 <script src="~/js/touchable.js?v=9"></script> 63 <script> 64 $.globalTouchable(); 65 </script> 66 </body> 67 </html>
效果图
