Javascript ios safari中奇怪的点击行为_Javascript_Html_Ios_Dom_Cordova

Javascript ios safari中奇怪的点击行为

javascript html ios dom cordova

Javascript ios safari中奇怪的点击行为,javascript,html,ios,dom,cordova,Javascript,Html,Ios,Dom,Cordova,我有一个奇怪的ios safari问题-我可以在phonegap和ios浏览器中重现这个问题：在标记区域外单击时，标记的效果与实际单击标记的效果相同标记是否只有HREF或单击处理程序并不重要您可以在此处找到代码：下面也是我还附上了一个屏幕截图，我用蓝色标记了一个近似区域，当点击该区域时，它会触发a或b的点击-它甚至包括点击这里的下半部分我也可以在实际的设备上复制，但是在模拟器中更容易，因为你可以用鼠标点击更精确 fastclick.js似乎部分解决了这个问题。然而，为什么会发生这

我有一个奇怪的ios safari问题-我可以在phonegap和ios浏览器中重现这个问题：

在标记区域外单击时，标记的效果与实际单击标记的效果相同

标记是否只有HREF或单击处理程序并不重要

您可以在此处找到代码：

下面也是

我还附上了一个屏幕截图，我用蓝色标记了一个近似区域，当点击该区域时，它会触发a或b的点击-它甚至包括点击这里的下半部分

我也可以在实际的设备上复制，但是在模拟器中更容易，因为你可以用鼠标点击更精确

fastclick.js似乎部分解决了这个问题。然而，为什么会发生这种情况？这是一种可用性特征，使得开发者不能创建太小的水龙头区域吗？没有人体验过吗？

<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&nbsp;<br>description 0
    </a>
    <br />
    <a id="b" href="#/chat/name-1">
        name 1&nbsp;<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>