HTML5¼¼Êõ

Òƶ¯¶Ëtouchʼþ || ÉÏÀ­¼ÓÔظü¶à - PC.aaron

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-09-01 10:04 ÎÒÒªÆÀÂÛ( )

Ç°ÑÔ£º ˵¶àÁ˶¼ÊÇÀᣬÔÚ½øÐÐÏîÄ¿¿ª·¢Ê±£¬ÔÚÉÏÀ­¼ÓÔظü¶àʵÏÖ·ÖҳЧ¹ûµÄÎÊÌâÉÏ£¬ÓÉÓÚµ±Ê±¿ª·¢ÈÎÎñ½ô¼±£¬ËùÒԾͰٶÈÕÒÁ˸÷ÖÖÒƶ¯¶ËµÄÉÏÀ­ÏÂÀ­ ʵÏÖ¼ÓÔظü¶àµÄ²å¼þ¡£È»ºó¾ÍÁôÏÂÁ˸ö¿Ó£ºÉÏÀ­¼ÓÔصÄʱºò»áÓÉÓÚÓû§´íÎóµÄ×ËÊÆ£¬ÀýÈ糤°´ºóÔÙtouchmoveµÈ»á³öÏÖ¿¨ËÀ

Ç°ÑÔ£º

˵¶àÁ˶¼ÊÇÀᣬÔÚ½øÐÐÏîÄ¿¿ª·¢Ê±£¬ÔÚÉÏÀ­¼ÓÔظü¶àʵÏÖ·ÖҳЧ¹ûµÄÎÊÌâÉÏ£¬ÓÉÓÚµ±Ê±¿ª·¢ÈÎÎñ½ô¼±£¬ËùÒԾͰٶÈÕÒÁ˸÷ÖÖÒƶ¯¶ËµÄÉÏÀ­ÏÂÀ­

ʵÏÖ¼ÓÔظü¶àµÄ²å¼þ¡£È»ºó¾ÍÁôÏÂÁ˸ö¿Ó£ºÉÏÀ­¼ÓÔصÄʱºò»áÓÉÓÚÓû§´íÎóµÄ×ËÊÆ£¬ÀýÈ糤°´ºóÔÙtouchmoveµÈ»á³öÏÖ¿¨ËÀµÄ¼ÙÏó¡£(ps£ºµ±È»£¬

ÎÒ²»ÈÏΪÊDzå¼þµÄÎÊÌ⣬µ±Ê±µÄÏë·¨ÊǾõµÃÒýÓõIJå¼þ´æÔÚ³åÍ»)£¬ÓÚÊÇ£¬ÎÒ¾ÍÖ±½Óͨ¹ý·â×°touchʼþÍê³ÉÉÏÀ­¼ÓÔØʵÏÖ·ÖÒ³µÄ¹¦ÄÜ¡£

±¸×¢£ºÎÄÕÂ×îºó»á¼ÓÉÏΪʵÏÖÕâ¸ö¹¦ÄÜÎÒÕÒµÄһЩ²å¼þ

Á˽âtouchʼþ

ÔÚÓ¦ÓÃtouchʼþʵÏÖÉÏÀ­¼ÓÔظü¶àʵÏÖ·ÖÒ³µÄЧ¹ûÉÏ£¬ÆäʵÎÒÃÇÓõ½µÄÖ»ÓÐtouchstart£¬touchmove£¬touchend£¬touchcancelʼþ£¬»¹ÓÐtargetTouches[0]

ºÍchangedTouches[0]ÊôÐÔ¼´¿ÉÍê³É¼òµ¥µÄ·ÖҳЧ¹û¡£

Á˽â¸ü¶àtouchʼþµÄ·½·¨¿ÉÒÔ·ÃÎÊ£º

https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

touchʼþÐèҪעÒâÊÂÏî

ÔÚÖ´ÐÐtouchʼþµÄʱºò£¬ÔÚ´ó¶àÊýÇé¿öÏÂÎÒÃÇÐèҪעÒâµÄ¾ÍÊÇ×èÖ¹ä¯ÀÀÆ÷µÄĬÈÏÐÐΪ£¬ÀýÈç¹ö¶¯Ê¼þ»òÕßä¯ÀÀÆ÷µÄËõ·Å£¬¿ÉÒÔͨ¹ýhtmlÒ³Ãæ¼ÓÉÏmeta±êÇ©½ûÖ¹

Óû§Ëõ·Å£º<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">£¬È»ºó

ÔÚtouchʼþÉϼÓÉÏevent.preventDefault()×èֹĬÈÏʼþ¡£

ÉÏ´úÂë

ͨ¹ý»ùÓÚzepto¼òµ¥µÄ·â×°ÁËtouchʼþÉÏÀ­¼ÓÔظü¶àµÄЧ¹û¡£

1 ;(function ($,window,undefined) { 2 var userDefinedSlide={ 3 isSupportTouch:"ontouchstart" in document ? true :false, endPos:{},upOrDown:'',winHigh:0,docHigh:0,scrollHigh:0,notDefault:init:function(){ 13 if(!this.isSupportTouch){ 14 console.warn('touch events are not supported at current device'); 15 }else{ 16 this.touchEvents(); 17 } 18 }, 19 touchEvents:function(){ 20 var that=this; 21 $("body").on("touchstart",function (e) { 22 var touch=e.targetTouches[0]; 23 that.startPos={ 24 x:touch.pageX, 25 y:touch.pageY, 26 time:+new Date() 27 }; that.docHigh=$(document).height();that.scrollHigh=$(window).scrollTop(); }); 32 $("body").on("touchmove",function (e) { 33 if(that.notDefault){ 34 e.preventDefault(); 35 } 36 var touch=e.targetTouches[0]; 37 that.endPos={ 38 x:touch.pageX, 39 y:touch.pageY, 40 time:+new Date() 41 }; 42 that.upOrDown=that.endPos.y-that.startPos.y; 43 }); 44 $("body").on("touchend touchcancel",function (e) { 45 if(that.upOrDown < 0 && that.docHigh<=(that.winHigh+that.scrollHigh)){ 46 console.log('is to bottom'); setTimeout(function(){ },1000); 52 } 53 }) 54 } 55 }; 56 userDefinedSlide.init(); 57 })( Zepto ,window,undefined);

¶ø»ùÓÚÊÇÔÚtouchmoveʼþÖ´ÐлñÈ¡´¥ÃþλÖû¹ÔÚtouchend/touchcancelʼþÖ´ÐлñÈ¡´¥ÃþλÖÃÔòÎÒûÓйý¶àµÄ¿¼¾¿¡£

ÒªÔÚtouchend/touchcancelʼþ»ñÈ¡´¥ÃþλÖõĻ°ÔòÐèÒª½«var touch=e.targetTouches[0];µ÷ÕûΪvar touch=e.changedTouches[0];

ÒòΪ£¬touchend/touchcancelʼþûÓÐtargetTouchesÊôÐÔ£¬Ö»ÓÐchangedTouchesÊôÐÔ¡£

¿ÉÄÜÓÐÈË´æÔÚÒÉ»ó£¬ÎªÉ¶Òª°ó¶¨touchendºÍtouchcancelÁ½¸öʼþÄØ£¬¸öÈËʼþ£¬·¢ÏÖÔÚ²¿·Ö°²×¿ÊÖ»úÉÏ»áÔÚtouchendʼþÉÏÓÐbug£¬²»ÄÜ

Ö´ÐУ¬ËùÒÔͨ¹ýÖ´ÐÐtouchcancelʼþ£ºµ±ÏµÍ³Í£Ö¹¸ú×Ù´¥ÃþµÄʱºò´¥·¢£¬À´´ïµ½touchendµÄЧ¹û¡£

ͨ¹ýÎÒÉÏÃæ¶ÔtouchʼþµÄ¼òµ¥·â×°¾Í¿ÉʵÏÖÉÏÀ­¼ÓÔظü¶àʵÏÖ·ÖÒ³µÄЧ¹ûÁË¡£

  ¸ü¶àÉÏÀ­¼ÓÔظü¶à¡¢ÏÂÀ­Ë¢Ð²å¼þ£º

dropload:https://github.com/ximan/dropload

iScroll:https://github.com/cubiq/iscroll

swiper:https://github.com/nolimits4web/Swiper(ps:swiperÒ²¿ÉʵÏÖÉÏÀ­¼ÓÔظü¶à)

mescroll:

 

Áí£ºÎÒÎÄÕ¿ªÍ·Ìáµ½µÄʹÓòå¼þ´æÔÚµÄbug£¬ÓÐÖªµÀµÄ´óÉñ¿ÉÒÔÁôÑÔ¸øÎÒร¬ÔÙ´Îл¹ýÏÈÁË¡£

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • Html5 Òƶ¯¶Ë ´¥Ãþ»¬¶¯Ê¼þ - ChnHonKer-СºÓ

    Html5 Òƶ¯¶Ë ´¥Ãþ»¬¶¯Ê¼þ - ChnHonKer-СºÓ

    2017-08-22 17:07

  • C#ʹÓÃXamarin¿ª·¢¿ÉÒÆÖ²Òƶ¯Ó¦ÓÃ(1.ÈëÃÅÓëXamarin.FormsÒ³Ãæ),¸½Ô´Âë - GuZhenYin

    C#ʹÓÃXamarin¿ª·¢¿ÉÒÆÖ²Òƶ¯Ó¦ÓÃ(1.ÈëÃÅÓëXamarin.FormsÒ³Ãæ),¸½Ô´

    2017-08-09 15:01

  • Òƶ¯Web¿ª·¢ - StormؼHYL

    Òƶ¯Web¿ª·¢ - StormؼHYL

    2017-08-06 10:01

  • .NET Core ʼþ×ÜÏß,·Ö²¼Ê½ÊÂÎñ½â¾ö·½°¸£ºCAP - Savorboard

    .NET Core ʼþ×ÜÏß,·Ö²¼Ê½ÊÂÎñ½â¾ö·½°¸£ºCAP - Savorboard

    2017-07-21 12:00

ÍøÓѵãÆÀ
°