Is there a way that a touch start event will not trigger the click event?

Question

When a visitor clicks on an image the click event will be triggered. However when someone touches the image, that same click event will be triggered, even if a touchstart event is available as well.

I like a different behavior for an actual click (mouse) event and a touch event. The strange thing is, even a mouseup event is triggered when used on a smartphone. Is there anyway you can separate the mouse from the touch events?

score 9 · Accepted Answer · answered Feb 20 '12 at 13:58

9

event.preventDefault();

Did the trick, hope this helps people!

answered Feb 20 '12 at 13:58

Mark

16,906
20
84
117

This won't work if you're just adding `event.preventDefault()` to the `touchstart` callback. At least not on links in iOS 8.4 Safari. You'd have to add it to the `click` event handler. – Dan Tello Jul 09 '15 at 21:57

score 1 · Answer 2 · edited May 23 '17 at 11:54

you can normalize an event..

See my answer to this question:

Click event called twice on touchend in iPad

You can also look in the jQuery mobile source code to find inspiration: http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js Start at line 982

/* 
* "events" plugin - Handles events
*/

(function( $, window, undefined ) {

// add new event shortcuts
$.each( ( "touchstart touchmove touchend orientationchange throttledresize " +
                    "tap taphold swipe swipeleft swiperight scrollstart scrollstop" ).split( " " ), function( i, name ) {

    $.fn[ name ] = function( fn ) {
        return fn ? this.bind( name, fn ) : this.trigger( name );
    };

    $.attrFn[ name ] = true;
});
....

Look at the tap event: (line 1049)

$.event.special.tap = {

Thanks for the thorough answer. The only thing is, now you are targeting 'special devices specifically' in this case the iPhone. I rather want all devices that support touchstart to treat click and touchstart different. I wish there was a simple var you could set to disable. — Mark, Feb 20 '12 at 13:55

score -1 · Answer 3 · answered Apr 18 '12 at 14:06

-1

It is a complex way to prevent click after touchstart. The click which propagates after touchstart is called ghost click.

Google has implemented a solution. Here you go..

http://code.google.com/mobile/articles/fast_buttons.html#ghost

answered Apr 18 '12 at 14:06

Hasanavi

8,455
2
29
35

Is there a way that a touch start event will not trigger the click event?

3 Answers3