触摸设备的JavaScript链接预览

JavaScript link preview for touch devices

本文关键字：链接 JavaScript 触摸      更新时间：2024-01-23

我目前正在制作的一个网站上有一些JavaScript，它会使选定的链接在鼠标悬停时显示预览，效果很好，但对于触摸设备，当点击链接时，它会显示预览，然后将用户发送到网站，我希望它在第一次点击时只显示预览，如果他们再次点击将其发送到页面。

我该怎么做？

我使用过的Java脚本：

<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' });
        });

以及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>

下面的代码可以防止第一次点击将您发送到页面，但第二次点击会发送到页面。

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