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>效果图
jQuery拓展简易快速实现触摸效果
原文地址：https://www.cnblogs.com/netgrace/p/js-touchable.html