Touch and Click in jQuery (without jQuery Mobile)

Problem

One of the most common things I do with JQuery is to attach click event listeners to buttons, links and other elements as follows:

$(“.class”).click(function(evt) {});

Unfortunately, I found that, while this approach works well for Desktop browsers, the user interaction on touch-enabled devices feels very awkward and sluggish.

Solution

Since this problem is of relevance for every mobile web application, numerous solutions have been proposed. All mobile UI JavaScript frameworks I know of provide built in support for ‘tab’ events, as opposed to ‘click’ events.

However, often we would just like to support being able to interact with simple buttons on our page regardless of whether a user accesses the site through a desktop or mobile browser; ideally, without adding another more or less ‘heavy’ framework to our site.

Luckily, jQuery Mobile is built in a very modular way and we can extract the particular component of the framework to support good support for tabs and clicks. Head to http://jquerymobile.com/download-builder/ and only check the ‘Touch’ component under Events.

Then, let the jQuery Mobile site build your download and add it to your page. For a quick test, you can also use the script provided below.

Next, we can rewire all calls to $(…).click() using the following snippet:


<script src="http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js " ></script>

<script>

$.fn.click = function(listener) {

    return this.each(function() {

       var $this = $( this );

       $this.on(‘vclick’, listener);

    });

};

</script>

Now, when you register an event listener in your app using $(…).click(), the respective element should be pleasant to use for both desktop and mobile users.

References

The Current State of (Touch) Events

Tap vs. Click: Death by Ignorance

6 thoughts on “Touch and Click in jQuery (without jQuery Mobile)

  1. this is a good blog! very enlightening! i’m going to try implementing the blog’s techniques on what i’m currently working on.

    i hope someone can answer a few questions, though, if it’s not too much trouble.

    a) in the jquery mobile download builder, the items “Namespace”, “Touch support test”, and “Virtual Mouse (vmouse) Bindings” are checked by default. does this mean that these components must also be downloaded along with the “Touch” event?

    b) is it still necessary to include the “jquery-mobile.css” link as part of the items in the HTML page’s header?

    that’s all. keep up the great work!

  2. Dear Max, unfortunately I can’t set the snippet at work. I made the jquery.mobile.custom.min.js file and linked to it. Without snippet it works fine, with the snippet it stops working.
    My script looks like this:

    $(document).ready(function() {
    var dir = “album/”;
    var pic = 0;
    var ImageArray = new Array(dir+”alb_1a.jpg”, dir+”alb_2a.jpg”);
    var descArray = new Array(“Baila II met Sammie”,”Sammie en Dorus, een rustig stel”);

    var picNumbers = ImageArray.length – 1;

    $.fn.click = function(listener) {
    return this.each(function() {
    var $this = $( this );
    $this.on(“.but_next”, listener);
    });
    };

    $(“.but_next”).click(function(){
    pic++;
    if(pic > picNumbers){pic = 0};
    document.slideShow.src = ImageArray[pic];
    document.getElementById(‘description’).innerHTML = descArray[pic];
    $(‘.opmerking’).remove();
    return false;
    });
    });

    I can’t find the error. Could you please have a look at this? Thanks in advance,

    Henk

    1. Hi Henk,

      What is this code for?:

      $.fn.click = function(listener) {
      return this.each(function() {
      var $this = $( this );
      $this.on(“.but_next”, listener);
      });
      };

      Could you rewrite it in a way so that $.fn.click is not used? Maybe it will work then?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s