ios safari中的奇怪点击行为

时间:2014-09-12 17:56:50

标签: javascript html ios dom cordova

我有一个奇怪的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&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>

我还附上了一个屏幕截图,其中我用蓝色标记了近似区域,点击该区域会触发#a或#b的点击 - 它甚至包括“点击此处”的下半部分。

我也可以在实际设备上重现,但在模拟器中更容易 - 因为你可以使用鼠标点击更精确。

ios simulator

0 个答案:

没有答案