Touch handler events

From: http://stackoverflow.com/questions/17567344/detect-left-right-swipe-on-touch-devices-but-allow-up-down-scrolling

fast click : ‘fc’

swipe left : ‘swl’

swipe right : ‘swr’

swipe up : ‘swu’

swipe down : ‘swd’

each check initializes it’s correspondent event.but you can scroll and do whatever else you do normally. you just have some new events.

you need swl swr, i aslo suggest to use fc (fastclick) for click events… it’s much faster than normal click.

window.onload=function(){
(function(d){
 var
 ce=function(e,n){var a=document.createEvent("CustomEvent");a.initCustomEvent(n,true,true,e.target);e.target.dispatchEvent(a);a=null;return false},
 nm=true,sp={x:0,y:0},ep={x:0,y:0},
 touch={
  touchstart:function(e){sp={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchmove:function(e){nm=false;ep={x:e.touches[0].pageX,y:e.touches[0].pageY}},
  touchend:function(e){if(nm){ce(e,'fc')}else{var x=ep.x-sp.x,xr=Math.abs(x),y=ep.y-sp.y,yr=Math.abs(y);if(Math.max(xr,yr)>20){ce(e,(xr>yr?(x<0?'swl':'swr'):(y<0?'swu':'swd')))}};nm=true},
  touchcancel:function(e){nm=false}
 };
 for(var a in touch){d.addEventListener(a,touch[a],false);}
})(document);
//EXAMPLE OF USE
var h=function(e){console.log(e.type,e)};
document.body.addEventListener('fc',h,false);// 0-50ms vs 500ms with normal click
document.body.addEventListener('swl',h,false);
document.body.addEventListener('swr',h,false);
document.body.addEventListener('swu',h,false);
document.body.addEventListener('swd',h,false);
}

in this case h is my handler for every type of evnet and i add the handlers to the body.

for what i understand your question you just have to write

YOURELEMENT.addEventListener('swr',YOURSWIPERIGHTFUNCTION,false);
YOURELEMENT.addEventListener('swl',YOURSWIPELEFTFUNCTION,false);

to handle multiple elements and the same function… just add one handler.

so if you have

<ul id="ul"><li>1</li><li>2</li><li>3</li></ul>

you do:

var deleteli=function(e){
 var li=e.target;
 console.log('deleting '+li.textContent);
}
document.getElementById('ul').addEventListener('swl',deleteli,false);

same for fc & swr

there is a bug in ios: don’t use alert() .. it will execute 2 times.

 

2,264 thoughts on “Touch handler events

  1. 匿名

    Thank you for your blog article.Really looking forward to read more. Will read on…

  2. Trevulan Muscle

    My husband and i felt so thrilled that Albert could conclude
    his studies through your precious recommendations he grabbed from your very own site.

    It is now and again perplexing just to happen to be making a gift of instructions which often the rest could have been selling.

    We realize we’ve got the blog owner to appreciate for that.
    The main illustrations you have made, the easy
    site menu, the relationships you will make it possible
    to create – it’s mostly great, and it’s really making our son in addition to our family reason why that article
    is excellent, and that is extraordinarily important. Many thanks for
    everything!

  3. ankara nakliyat firması

    Ankara Nakliyat Firması olarak biliyoruzki Evden eve nakliyat zor ve profesyonellik gerektiren bir iştir. Yetiştirilmiş eleman kadrosu, kapalı kasa araçlar, sigortalı taşımacılık, özenle seçilmiş paketleme malzemeleri, ücretsiz expertiz hizmeti, eşyalarınızın demontaj ve montaj işlemleri, tam zamanlı çalışma ve müşteri, memnuniyetini en ön planda tutmak gibi bir çok birikime sahibiz. Biliyoruz ki işinizi en güzel şekilde yerine getirecek firma biziz. Uzman kadromuz ve egitimini almış personellerimiz ile evden eve nakliyat, büro – ofis taşımacılığı, kurumsal nakliyat hizmeti sunmaktayız.

  4. 匿名

    HeyHowdyHi thereHeyaHey thereHiHello excellentterrificgreatfantasticexceptionaloutstandingsuperb blogwebsite! Does running a blog like thissimilar to thissuch as this take arequire a lot ofmassive amountgreat deal oflarge amount of work? I haveI’ve novery littlevirtually noabsolutely no knowledge ofexpertise inunderstanding of programmingcomputer programmingcoding buthowever I washad been hoping to start my own blog soonin the near future. AnywaysAnywayAnyhow, if you haveshould you have any suggestionsrecommendationsideas or tips fortechniques for new blog owners please share. I knowI understand this is off topicsubject butneverthelesshowever I justI simply had toneeded towanted to ask. ThanksThanks a lotKudosAppreciate itCheersThank youMany thanks!

  5. 匿名

    I cannot thank you enough for the post.Really looking forward to read more. Cool.

  6. 匿名

    This design is wickedspectacularstellerincredible! You certainlyobviouslymost certainlydefinitely know how to keep a reader entertainedamused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) GreatWonderfulFantasticExcellent job. I really enjoyedloved what you had to say, and more than that, how you presented it. Too cool!

  7. 匿名

    I cannot thank you enough for the blog post.Really looking forward to read more. Awesome.

  8. diy service manuals for car

    Greetings I am so excited I found your website, I really found
    you by accident, while I was looking on Aol for something else, Anyhow I am here now and would just like to say cheers for a remarkable post and a all round
    exciting blog (I also love the theme/design), I don’t have time
    to read it all at the moment but I have saved it and also added in your RSS feeds, so when I have time I will be back to read a
    great deal more, Please do keep up the awesome work.

  9. What Equipment is Needed for Sling TV

    Hello! I could have sworn I’ve been to this blog before but after checking through
    some of the post I realized it’s new to me. Anyways, I’m definitely glad I found it
    and I’ll be book-marking and checking back often!

  10. haynes repair manuals for car

    I loved as much as you will receive carried out right
    here. The sketch is tasteful, your authored subject matter stylish.
    nonetheless, you command get got an nervousness over that you wish be
    delivering the following. unwell unquestionably come more formerly
    again as exactly the same nearly very often inside case you shield this
    increase.

Comments are closed.