这是一个类似于IOS 5(safari)中“position:fixed” div上的HTML触摸事件错误的问题。
有人说这个问题已经被修复。但是,在iOS 8上,我发现只有在您缓慢点击和滚动页面时才能解决。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Document</title>
<style>
header {
position: fixed;
width: 100%;
height: 600px;
top: 0;
color: #fff;
background: rgba(0, 0, 0, 0.9);
z-index:100;
}
.content {
height: 10000px;
background: url(http://placehold.it/350x150&text=Background);
}
</style>
</head>
<body>
<header></header>
<section class="content"></section>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($) {
'use strict';
$('header').on('touchend', function(event) {
event.stopPropagation();
$('<p>Tap on float content.</p>').appendTo('header');
// hack 1
var $temp = $('<div style="height: 20000px"></div>');
$temp.appendTo('body');
setTimeout(function(){
$temp.remove();
}, 1);
});
$(document).on('touchend', function() {
$('<p>Tap on UNDER content.</p>').appendTo('header');
});
// hack 2
$('body').bind('touchstart', function(e) {});
}(jQuery));
</script>
</body>
</html>
您可以通过以下两种不同的方式找到错误:
- 快速滑动并滚动页面上的
<head>
区域多次。 - 在.content区域上滑动,然后在页面停止滚动之前快速点击
<header>
区域。
<header>
区域时输出“Tap on UNDER content.”。
更新:
还有第三种情况:
- 在.content区域上滑动,然后在页面停止滚动之前快速再次点击.content区域,然后点击
<header>
区域。在这种情况下,点击<header>
区域不会输出任何内容。
”。但它们都没有起作用。
有什么想法可以解决这个问题吗?谢谢。
有什么想法可以解决这个问题吗?谢谢。