Talk about Jquery Touch

  When first time I got to learn about web ,I thought it is just run in browsers .But one day ,I was told to build a web page which can run in mobile browsers .At that moment ,I thought it doesn't make any difference with PC browsers .So I started quickly .And I built the page and ran it .Boom...There are some problems in the mobile browser : the 'click' event doesn't work ,the 'click' event is trigger twice sometimes and the list doesn't go fluently when you scroll it .

  So I knew something's wrong .I recognized that there are some differences between PC browsers and mobile browsers in some events like click ,scroll or touch .So I was about to fix it .

  First ,click .Why it doesn't go well when you touch to trigger click event ?Here is the thing .The click event is more like suitable for cursor ,but when we touch the screen ,the event we did is called touch .There are differences .And if we bind the click event to the HTML element maybe the button but we touch it ,it will call the touch event first ,but we declare nothing with the touch event ,so nothing will happen .In Jquery ,the event will be handled by the element's parents which triggered it but not declare it .So the event will be passed to the parents and handled .So sometimes it will look like the function is called twice when you touch .'Cause you didn't stop the event passing to the parents .Let's check the code .

$('.myButton').on('touch click', function(event){
            if(event.handled !== true) {
                //do the thing
                event.handled = true;
            } else {
                return false;
            }
        });

  That's it .It will go very well without those problems .

  Second ,scroll .When I scrolled my list in the mobile screen ,it looks like the list was seized up a little bit .Anyway it didn't go very well .But the point is I have add the "overflow: scroll;" to the list css attributes .But nothing changed .So I looked out and found a solution .

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

  These two lines code are added to the list css .The first for the PC and the second for the mobile .

  I got to say that is my little thing which is maybe not 100% right and I hope it will help you .Have a good day~Good night !