Question

我有一个带有一些链接的html页面。当您单击链接时，某些jQuery代码会隐藏div容器，并显示另一个div。第一个div中的原始链接不再可见。

从浏览器（webkit on android）的角度来看，一切都很完美。

但是，如果我触摸屏幕，隐藏的链接就会像看到它们一样反应。如果我触摸隐藏链接的屏幕，我会看到一个橙色矩形。浏览器不执行任何操作，只显示单击的链接。

如何同步触摸屏和jquery隐藏/显示功能？

我的测试是在webkit，android和sony ericson xperia手机上进行的。

我已经实现了一个带有现象的测试页面。请参阅here或使用此qr代码：

alt text

当你触摸链接时，你会转到没有任何链接的div，但是，在我的手机上，如果我触摸第一行，我会看到非可见链接上的效果。

这是html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Test for Stackoverflow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
$(document).ready(function ()
{
  $("#with-link a").click(function()
  {
    $("#with-link").hide("slow");
    $("#after-touch").show("slow");
    return false;
  });
});

    </script>
  </head>
  <body>
    <div id="with-link">
      Oh... <a href="http://stackoverflow.com">It's a link !</a>
    </div>
    <div id="after-touch"style="display:none">
      But it's not go to stackoverflow :-)<br>
      To Touch Or Not To Touch that is the question.
    </div>
  </body>
</html>

Answer 1

我没有智能手机来测试这个，但我对此的看法是链接并没有完全消失：它只是隐藏了。

你有多少个链接？如果它只是一个你可以简单地将其从存在中移除（当你需要隐藏它时）

$('#mylink').remove();

然后再次创建

$('#linkcontainer').append('<a href="#">damn link</a>');

如果您有更多链接，这不是一个方便的方法。然后，您可以使用CSS，将链接定位到绝对位置，然后将其发送到-4999px左侧。这将是你的隐藏功能;）

触摸屏对隐藏链接作出反应

1 个答案: