iOS7 Safari:点击具有较高z索引的固定位置的标题栏会触发元素下的事件处理程序

我的网页有一个固定的标题栏。滚动时，内容将使用z索引进入标题栏下方。单击内容区域中的块将切换其颜色。单击标题中的任何位置都不应触发块的事件处理程序。

但这在iOS7 Safari上不起作用。敲击页眉可以使方块变色。当我在互联网上搜索时，它似乎是iOS7的错误。尝试窗口.滚动到（0,0），和额外的20px的东西，没有帮助。

有趣的是，我在iOS7移动Safari上的雅虎财经和雅虎体育网络应用程序上注意到了同样的问题，它们也有固定的标题。

有人知道一个好办法吗？

这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<style>
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background: grey;
    width: 100%;
    height: 50px;
}
.content {
    z-index: 1;
    margin-top: 60px;
}
.block {
    background: red;
    height: 150px;
    margin: 4%;
}
.block.green {
    background: green;
}
</style>
</head>
<body>
    <header>
        Fixed positiond header.
    </header>
    <div class="content">
        <p>On iOS Safari, scroll the blocks below the header, tap the header on the top edge to let the address bar appear. Then tap anywhere in the header, you will see block toggling colors.
        </p>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>

<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(document).ready(function() {
    $(".block").on("click", function() {
        $(this).toggleClass("green");
    });
});
</script>
</body>
</html>

这似乎是一个错误，或者至少是iPad上Safari处理这一问题的方式的一个怪癖。作为一种变通方法，如果您在头中添加并onclick事件处理程序，它似乎可以解决问题：

<header onclick="">

如果您喜欢这种方法，也可以使用jQuery添加一个。

相关内容

最新更新

热门标签：