Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 263
Mark Avatar asked Feb 20 '12 13:02

Mark


People also ask

Is click event same as touch?

The touchstart event occurs when the user touches an element. But a click event is fired when the user clicks an element.

How do you bind Touchstart and click events but not respond to both?

Just adding return false; at the end of the on("click touchstart") event function can solve this problem.

What is touch start event?

The touchstart event occurs when the user touches an element. Note: The touchstart event will only work on devices with a touch screen. Tip: Other events related to the touchstart event are: touchend - occurs when the user removes the finger from an element.

How do you trigger an event on click?

If you just need to trigger a click event, you can omit the line that begins with for( . @Parag: Read it again. The loop is to click the same link 50 times, which is what it does.


2 Answers

event.preventDefault();

Did the trick, hope this helps people!

like image 146
Mark Avatar answered Oct 14 '22 06:10

Mark


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 = {
like image 1
Andreas Louv Avatar answered Oct 14 '22 04:10

Andreas Louv