1

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.

Miguel Bocquier
  • 2,449
  • 5
  • 22
  • 38
  • 1
    `Touch` is not a jQuery event. Have you tried `on("click" ... `? – Ben Aug 19 '14 at 14:04
  • OK silly me. But how do I make the touch device detection to make my special code? – Miguel Bocquier Aug 19 '14 at 14:22
  • 1
    You use something like jQuery Mobile or a more lightweight library that offers you touch support. – Ben Aug 19 '14 at 14:23
  • OK thx : I found the most simple touch detection here: http://stackoverflow.com/questions/2915833/how-to-check-browser-for-touchstart-support-using-js-jquery – Miguel Bocquier Aug 19 '14 at 14:38
  • I find it silly that touch support did not make it into regular jQuery, but there is a plugin that adds it: [benmajor/jQuery-Touch-Events](https://github.com/benmajor/jQuery-Touch-Events) I'm using it and it works well. – Stijn de Witt Nov 06 '15 at 13:36

1 Answers1

3

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

Paolo Casciello
  • 7,982
  • 1
  • 43
  • 42
  • The `click` event adds a [300 ms delay](http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/) on many mobile devices, so is not ideal. – Stijn de Witt Nov 06 '15 at 13:35