我有一个奇怪的ios safari问题 - 我可以在phonegap和ios浏览器中重现这个问题:
当您在A标签区域外单击时,其效果与实际单击标签的效果相同。
标签只有HREF或点击处理程序无关紧要。
您可以在此处找到代码:http://jsfiddle.net/ygaeb0r5/
也在下面。
<style>
* {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
outline: none;
text-decoration: none;
color: #000000;
display: inline-block;
background-color: green;
}
img {
border: none;
}
span {
background-color: yellow;
padding: 6px;
display: inline-block;
}
</style>
<title>Template App</title>
</head>
<body>
<div>top
<br />
<br />
<br />
<br />
<span>click here</span>
</div>
<a></a>
<a id="a" href="#/chat/name-0">
name 0 <br>description 0
</a>
<br />
<a id="b" href="#/chat/name-1">
name 1 <br>description 1
</a>
<script type="text/javascript">
var a = document.getElementById("a");
a.addEventListener("click", function() { alert("a clicked"); });
var b = document.getElementById("b");
b.addEventListener("click", function() { alert("b clicked"); });
</script>
</body>
我还附上了一个屏幕截图,其中我用蓝色标记了近似区域,点击该区域会触发#a或#b的点击 - 它甚至包括“点击此处”的下半部分。
我也可以在实际设备上重现,但在模拟器中更容易 - 因为你可以使用鼠标点击更精确。