Home > Uncategorized > Touch device friendly click events with JQuery

Touch device friendly click events with JQuery

I discovered on certain Android devices (i.e. Samsung S5), the “click” event wouldn’t fire on elements that weren’t naturally clickable, like

‘s and ‘s – I tried the usual hacks like cursor:pointer and an empty onclick handler, but neither worked reliably.

I noticed that touchstart and touchend worked, but the side effect was that it interfered with scrolling, since if you tried to scroll the page, it would also fire the touch events.

Although I did notice that a scroll was always a combination of a touchmove and touchend – So, by suppressing the touchend event if it was preceded by a touchmove meant the user’s intent was to click, not scroll.

Now, to minimize code change, and there was plenty of $(whatever).bind(“click”…’s throughout the app, I wanted to create a jquery plugin that I could drop into the page.

(function($) {

$.fn.touchClick = function(action) {

this.each( function() {

$(this).bind(“touchmove”,function(){

$(this).attr(“ignore”,”touchend”);

setTimeout(function()

{

$(this).attr(“ignore”,””);

},1000);

});

$(this).bind(“touchend”,function(event){

if ($(this).attr(“ignore”) != “touchend”)

{

$.proxy(action,this)(event);

}

});

});

}

}(jQuery));

– And that’s what I came up with. The tricky part was the $.proxy(action,this)(event), which basically maintains the (this) variable so I could rewite code from $(whatever).bind(“click”,function(){ this…}) to $(whatever).touchClick(function(){this…)

Hope no other surprises!

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

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

%d bloggers like this: