CODEWITHSUNDEEP
jquerytouchpreventdefault
migmaker
migmaker

Reputation: 2516

jQuery event.preventDefault() on touch event does not cancel link

So I got a website with a projects index page made of square thumbnails.

On the desktop version when you hover on one project square thumbnail it displays a cover with some text information about the project. And when you click on that cover you go to the project page.

On the mobile/touch version, I got to adapt it otherwise when you tap the square thumb you have no time to see the cover (displayed for a fraction of a second) and it goes directly to the project page.

So here the HTML code of a project square thumbnail inside the portfolio index:

<div id="portfolio">
    ... 
    <a href="/projects/project-page" class="thumbnail">
        <img src="/assets/thumbnail-project-name.jpg" alt="Project info"/>
        <div class="text">
            <span class="slogan">Project tagline</span>
        </div>
    </a>
    ... 
</div>

Here is my jQuery attempt to try to catch the touch event and do special stuff after...
But for some reason event.preventDefault() does not work and my link still continue to fire on touch. 

$(function onDOMLoaded() {

    var $portfolio = $("#portfolio");

    // TOUCH EVENTS special
    $portfolio.on("touch", ".thumbnail", function(e) {

        e.preventDefault();

        // show thumbnail cover and fire the link on second touch only
        // ...

    });

}); // onDOMLoaded

Tests made on iPad2/iOS7 and iPhone5/iOS7 jQuery V1.10.2

I am stuggling for days but cannot find a solution myself or in stackover.

Upvotes: 1

Views: 1141

Answers (1)

Paolo Casciello
Paolo Casciello

Reputation: 8202

The browser will fire the click event anyway so you need to put your logic in the click event.

Upvotes: 3

Related Questions