Is there a way to replace all click listeners with touchend listeners in JQuery and AngularJS?

Question

I'm sure you've heard this a lot, but I can't seem to find a good solution.

Is there a way to swap any click listeners with touchend listeners?

Since my iPad web app is sizing itself to the screen automatically, I don't think our users (in-house, anyway) will need double tap to zoom, and the 300ms wait is really brutal.

Could I do something like

$(document).click(function(e){
   e.preventDefault();
});
$(document).bind('touchend', function(e){
   e.currentTarget.click();
});

Or something similar that would affect the entire page / app globally? Ideally, I'd run this code only if I detect touchEvent capabilities on the page. (Although touchscreen monitors with a mouse kind of confuses things...)

Thanks in advance!

Answer 1

If your application is already developed, then one silver-bullet approach could be to insert a shim that globally handles touch events (while suppressing default mouse events) and dispatches the corresponding mouse events.

There are a few libraries out there that do this. One that I have used successfully is: fastclick . It's simple to set up, pretty configurable, doesn't insert listeners on desktop browsers, and will remove that 300ms delay.

Answer 2

在模块中包含模块ngTouch（ http://docs.angularjs.org/api/ngTouch ）。

Answer 3

As said in other question , you could use this code:

// List bound events:
console.dir( jQuery('#elem').data('events') );

// Log ALL handlers for ALL events:
jQuery.each($('#elem').data('events'), function(i, event){
    jQuery.each(event, function(i, handler){
        console.log( handler.toString() );
    });
});

// You can see the actual functions which will occur
// on certain events; great for debugging!

To get to listeners and then replace/modify then. Hopefully it helps!

Answer 4

What I ended up doing was using AngularTouch (ngTouch).

This worked, but I had problems mixing:

• angularJS

• angularTouch

• jquery

• jqueryui (for draggable and droppable)

• jquery touchpunch (for mobile)

What I ended up doing was using: (in this order)

• jquery

• jqueryui

• jquery touchpunch

• angularjs

• Fastclick

This allowed fast clicks and drag and drop on mobile!