Recently I got opportunity to solve some issues on a webapplication which was supposed to run on desktop browsers and smartphone broswers both.
Since it was designed to work with mobile browsers also javascript was written to handle events which occurrs on mobile browsers.
So in this post I will share my experience of the same.
First problem assigned to me was that there was a dropdown which had different options like "Upcoming. Monthly, Past Week" So user has to select one option and based on that option filtered result list will be populated on screen.
So problem here was when ever user was trying to select any option from this dropdown in mobile website browser dropdown does use to open and close again so user was not able to select any option from that dropdown.
After looking into the code I found there one mobile browser event "touchstart" wired up and handler on this event code was written to just close this dropdown if its opened and this event was handled on document level or would say at top level like $('html').on("touchstart", function () { // code to hide dropdown });
Also when I looked at dropdown code its onclick was properly wired up to handle click and selection of item but in case of mobile browsers this click event doenst use to fire instead touchstart use to fire before and its handler as defined above use to execute.
Also one point which learned was that in browsers click event is fired after 300ms delay since user touched the screen and touchstart has been fired. This delay has been kept just to check if user is actually going to click or just tap or do touchstart.
Then what I thought is that if I define a handler of touchstart at dropdown level then event will bubble up. And guess what it worked!!
I simply handled ontouchstart like onclick and copied handler in onlcik to ontouchstart now when user use to touch dropdown first touchstart of body used to fire defined at top level and then touchstart handler of dropdown fired which read the selection and filtered the list.
It was amazing learning for me since it was first time I was handling any mobile browser related issue.
Then I cam to know that there are plethora of mobile browser event like touchstart, touchmove, touchened and swip and etc. which one can handle to show desired results in mobile browsers.
Keeeeep listening!!
