jQuery Mobile ‘Events’

Most web developers use the popular jQuery JavaScript library on a regular basis. I use it every day. For standard web development, it’s a fantastic resource and certainly saves a lot of time. Recently, the team behind the project announced that their mobile plugin for the library (creatively named jQuery Mobile) was in the Release Candidate phase. However, sometimes as a developer you might want to yield the functionality of touch events and other mobile events without having to include the whole plugin. As a result, I decided to set to and write a series of custom plugins for stand-alone jQuery which mimic the events of a mobile device.

Introduction

The first thing to do was to identify the types of events that were needed in everyday mobile web app development. This list could be endless, so I narrowed it down to the following:

  • tap
  • taphold
  • doubltap
  • tapstart
  • tapend
  • swipeleft
  • swiperight
  • swipeup
  • swipedown

I wanted to try and maintain the standard shortcut hooks for events in jQuery. For example, we’re all familiar with the use of $('#my_element).click(); or $('#my_element').mousedown();, and I wanted similar functionality and ease of use for my functions. So for example calling the tap event on an element would be as simple as $('#my_element').tap(function() {  /* Some code here */ });. The best way to achieve this was to create a series of plugins which handled all of the functionality that is needed for the events. This seemed relatively straightforward on the surface of it.

However, as I developed all of the calculations and methods needed to handle the events, I suddenly realised that there were a number of considerations that weren’t immediately obvious.

Stumbling Blocks and Considerations

The first major problem is that touch screen-only mobile devices do not natively support the standard mouse events we are familiar with, and those that do only trigger events such as mousedown after a delay (typically around 200 milliseconds). Digging around, I found that this was due to the fact that the browser installed on the device first had to check if the touch event was to be a longtap, or a double tap, and handle any native functionality first, and then execute whatever handler code the mousedown event was supposed to fire. 200 milliseconds doesn’t sound like a lot, but if you’ve got a series of events, or you’re wanting to create a response UI, then you need something faster.

The solution I came up with was to analyse the browser the JavaScript was being executed in, and check if it supported touch events. If it did, we could use those touch events to fire the custom events, and if it didn’t, we could use standard mouse events. This checking is easily achieved by testing whether the ontouchstart event exists within the documentElement (a property of the document object). The following code will return true if the browser supports touch events, and false if it doesn’t: var touch_capable = ('ontouchstart' in document.documentElement);.

The next problem I had was that in mobile devices, touch events tend to contain an array, since it’s possible that the device supports multi-touch functionality. As a result, it wasn’t possible to use a single method in certain circumstances, since devices that don’t support touch events do not contain arrays of events, rather just a single object. As a result, some of the methods feature two functions; one for touch devices, and another for regular devices.

Demos and Downloads

I have so far only tested these events in a WebKit browser (Chrome 15.0.874.106) and iOS 5 (Mobile Safari). They’re still very much a work-in-progress, but I hope that they will be useful to some of you out there raring to go with mobile web app development. To demonstrate the events themselves, I have put together a simple Carousel which shows most of the functionality. You can check it out here:

Carousel Demo

If you like what you see, please feel free to download the code. I’ve released it under the MIT Licence, so you don’t need to worry about using it in your own code either. The links below can be used to download the source. I will continue to work on these events in the not-so-distant future, and have a lot of useful things planned for them!

Download full source code
Download minified code

Roadmap

So, what’s in the pipeline for this project? Well, there are still plenty of other functions and hooks that need to be added to the list of events that the script supports. Hopefully when you next hear from me about this project, I will have added the following events:

  • scroll
  • scrollstart
  • scrollend
  • pinch
  • pinchstart
  • pinchend
Thanks for reading, and if you have any comments, I’d love to hear them!

11 Comments

  1. Reply

    [...] and more. Mobile web app development companies provide mobile solutions for all business.Sencha Touch is an HTML 5 and JavaScript based framework for mobile that enables mobile developers t…is one of the most proficient ways to develop high performance, sophisticated mobile apps. Each and [...]

  2. Reply
    Chocky May 15, 2012

    Yum! I tried a lot of swipe plugins and this is my fave, many thanks for sharing. I found I got an error with the minified version however. Also it would be nice to be able to use $(ele).on(‘tap’,function).

    • Reply
      Ben May 17, 2012

      Thanks Chocky, glad you liked the files and found the swipe plugin useful. I am aware of the issue with the minified version, and am currently working on migrating everything across to GitHub. Hopefully once that’s done, I can sort out the minified version. I’ll also be looking at adding in proper event bindings, too. I’ll be adding a few other features in the next instalment, including touch scrolling. Shall I add you to the mailing list to keep you posted?

  3. Reply
    Chocky May 15, 2012

    I had a problem – setting tap() on overflow:scroll elements made them not scrollable. Removing the event.preventDefault inside of tap() fixed this. Is there a reason you were calling that?

    • Reply
      Ben May 17, 2012

      The only real reason that e.preventDefault() was called from inside tap was that when the event is called from something other than a touch device, it can sometimes create odd behaviour. It would be better to move the option to inside the function call though, so using a combination of $(ele).live(‘tap’, function(e) { e.preventDefault(); });

      Something else for the next iteration – thanks for your feedback and comments.

  4. Reply

    [...] time to sit down and completely re-write the jQuery mobile events I mentioned in my earlier post (see here for more information). Details of the events can be found after the [...]

  5. Reply
    Ben May 23, 2012

    Finally got round to rewriting everything. Check out the new Blog post, or check out the code on GitHub.

  6. Reply
    James March 25, 2013

    I am working on a Phonegap project and would really love to use your jquery mobile events lib. But can not get it to work with iScroll 4. Have you run into this problem or do you know of a solution? Thanks

    • Reply
      Ben March 26, 2013

      When you say that the don’t work, how do you mean? Do the events not trigger, or does iScroll interfere with them?

  7. Reply
    Michael Pawlowsky November 12, 2013

    Just found this and will give it a try for a parallax site. I am hoping swipe can be used like mousewheel event.

    Wanted to say thanks for putting it out there.

    • Reply
      Ben November 12, 2013

      Thanks Mike. Just bear in mind that swipe isn’t a ‘live’ event, it is triggered after a swipe event occurs. If you need to mimic scroll behaviour, you should look into the native touchmove and mousemove events.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>