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?

Solution 1

event.preventDefault();

Did the trick, hope this helps people!

Solution 2

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 = {

Comments

[Mark]

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.

[Dan Tello]

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.