触摸设备的 JavaScript 链接预览

Question

I have some JavaScript on a website I'm currently making which causes selected links to show a preview when moused over which works fine, however for touch devices when the links are tapped it shows the preview then sends the user to the site, I'd like it to show just the preview on the first tap, then if they tap again to send them to the page.

How can I do this?

My Java Script that I've used:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">     
<script type="text/javascript">
$(function() {
            $('#p1 a').miniPreview({ prefetch: 'pageload' });
            $('#p2 a').miniPreview({ prefetch: 'parenthover' });
            $('#p3 a').miniPreview({ prefetch: 'none' });
        });

And the HTML:

<p id="p1" align="center"><a href="http://link">link description</a><br><br><br><br><br><br><br><br></p>
<p id="p2" align="center"><a href="http://link">link description</a><br><br><br><br><br><br><br><br></p>
<p id="p3" align="center"><a href="http://link">link description</a><br><br><br><br></p>

Answer 1

Here is code that would prevent the first click from sending you to the page but the second click does.

var click = 0;
$( "a" ).click(function( event ) {
var clickNum = ++click;
if(clickNum == 1) {
   event.preventDefault();
   //preview code
} 
});