Touch screen reacts on hidden links_问答_开发者

开发者 https://www.devze.com 2023-01-15 15:25 出处：网络

I have a html page with some links. When you click on a link, some jQuery code hides the div container, and shows another div. The originals links, in the first div, are no longer visible.

From the browser (webkit on android) point of view, everything works perfectly.

But if I touch the screen, the hidden links react as if they were visible. If I touch the screen, where the hidden links would be, I see an orange rectangle. The browser does nothing it is only showing the link as clicked.

How is it possible to synchronize touch screen and jquery hide/show functions?

My test is on webkit, android, and sony ericson xperia phone.

I've realised a test page with the phenomen. See it here or with this qr code:

Touch screen reacts on hidden links

When you touch the link, you go to a div without any links, but, on my phone, if I touch the first line I see an effect on the non visible link.

Here is the 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">
      O开发者_如何转开发h... <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>

I don't have a smartphone to test this, but my take on this is that the link didn't disappear completely: It's just hidden.

How many links do you have? if it's just one you can simply remove it from existence (when you need to hide it)

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

and then create it again

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

If you have more links, this is not a convenient method. You can then play with CSS, position the link to absolute, and send it to -4999px left. This will be your hide function ;)