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?

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?

• javascript
• events
• touch
• mouse

3 Answers 3

event.preventDefault();

Did the trick, hope this helps people!

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

It is a plex 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./mobile/articles/fast_buttons.html#ghost