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.
Reblogged this on Sutoprise Avenue, A SutoCom Source.
nice, thanks
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!
Hi! Thank you for your comment!
Re a) I just tried it out on the download builder (http://jquerymobile.com/download-builder/) and I could select and download the ‘Virtual Mouse (vmouse) Bindings’ item by itself. A download of 15 kb results for version 1.4.2 – doesn’t it work for you?
Re b) no, no css is required for this to work!
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
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?