我有一个带链接的HTML页面。当您单击一个链接时,一些jquery代码会隐藏DIV容器,并显示另一个DIV。在第一个DIV中,原始链接不再可见。
从浏览器(android上的webkit)的角度来看,一切都工作得很好。
但是,如果我触摸屏幕,隐藏的链接会作出反应,就好像它们是可见的一样。如果我触摸隐藏链接所在的屏幕,就会看到一个橙色的矩形。浏览器不做任何操作,它只显示单击时的链接。
如何同步触摸屏和jquery隐藏/显示功能?
我的测试是在Webkit、Android和Sony Ericson Xperia手机上进行的。
我已经实现了一个关于这个现象的测试页面。请参见
here
或with this qr code:。
当你触摸链接时,你会进入一个没有任何链接的分区,但在我的手机上,如果我触摸第一行,我会看到一个对不可见链接的效果。
这是HTML:。
<!doctype html public“-//w3c//dtd html 4.01 transitional//en”>
& HTML& GT;
&头;
<title>测试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(函数()
{
$(“带链接A”)。单击(函数()
{
$(“with link”).hide(“slow”);
$(“触摸后”).show(“慢”);
返回错误;
(});
(});
& /脚本& GT;
和/头& GT;
和身体;
<div id=“with link”>
哦。。。<a href=“http://stackoverflow.com”>这是一个链接!& lt;/a & gt;
&L/DIV & GT;
<div id=“after touch”style=“display:none”>
但它不会转到stackoverflow:-)<br>
触摸还是不触摸,这是个问题。
&L/DIV & GT;
和/身体;
& lt//html & gt;
< /代码>
从浏览器(android上的webkit)的角度来看,一切都工作得很好。
但是,如果我触摸屏幕,隐藏的链接会作出反应,就好像它们是可见的一样。如果我触摸隐藏链接所在的屏幕,就会看到一个橙色的矩形。浏览器什么也不做,只显示单击的链接。
如何同步触摸屏和jquery隐藏/显示功能?
我的测试是在webkit,android和sony ericson xperia手机上。
我已经实现了一个关于这个现象的测试页面。看到它here或者用这个二维码:
当你触摸链接时,你进入一个没有任何链接的分区,但是在我的手机上,如果我触摸第一行,我会看到不可见链接的效果。
这是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>
