Tap on one element triggering tap on another element appearing in the same place on mobile Safari (ghost taps)

Question

When someone taps a button, it causes another page to appear. To prevent the tap from cascading down into another element on the new page that appears, we use preventDefault. We have seen this as a solution to the problem elsewhere on StackOverflow. However, it's not working for us.

Code:

// Bind what happens when user taps on app
$( '#templates .app_box' ).on( 'tap', function( ev ) {
    // Get itunes ID
    APP_PICKED = $( this ).attr( 'itunes_id' );

    // If on category page, update category history with new path
    if ( panabee_get_active_page().attr('id') == 'category_page' ) {
        // Get app path and scrub app from it
        var app_path = $(this).attr( 'path' );
        app_path = app_path.substring( 0, app_path.lastIndexOf(PATH_DELIMITER) );

        // Convert path string into array and store in history
        CATEGORY_PICKED_HISTORY = get_path_array( app_path );
    }

    // Show app
    if ( playing_game() ) {
        play_app_game( this );
    } else {
        panabee_change_page( '#app_page' );
    }

    // Prevent double tap
    ev.preventDefault();
});

Reproduce:

1) From your iPhone, visit www.tekiki.com.

2) Tap on the first app icon. This causes the app page to appear. If you tap in the right place, the original tap causes the download button (on the app page) to get triggered.

Answer 1

Our problem was that we triggered the tap event with custom code. We fixed this by using jQuery Mobile (1.3.2) instead. It's bloated, but it works and handles all touch events like tap and swipe.

Answer 2

Your code is preventing the event tap to propagate.

However, it is most likely that some other event causes the trigger (guess: event click). In fact, your tap is not even a real DOM event, but something invented by jQuery Mobile framework, so it is very likely that it behaves differently compared to native JavaScript events.

http://api.jquerymobile.com/tap/

Try binding click event instead.