[英]Touch event on position: fixed; element doesn't work correctly on iOS
This is a similar problem with IOS 5 (safari) bug with HTML touch events on "position:fixed" div这是一个与IOS 5 (safari) bug 类似的问题,在“position:fixed”div 上有 HTML 触摸事件
Somebody said that this bug has been fixed.有人说这个bug已经修复了。 But, on iOS 8, I find it is only fixed when you tap and scroll the page SLOWLY.
但是,在 iOS 8 上,我发现它只有在您点击并缓慢滚动页面时才会修复。
Here is my codes:这是我的代码:
<!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>
You can find the bug in these two different ways:您可以通过以下两种不同的方式找到错误:
<head>
area for several times.<head>
区域快速滑动并滚动页面数次。<header>
area before the page stop scrolling.<header>
区域。 In both cases, sometimes you can find that "Tap on UNDER content."在这两种情况下,有时您会发现“点击内容下方”。 is output when you tap on the
<header>
area.点击
<header>
区域时为 output。
Update:更新:
There is 3rd case:还有第三种情况:
<header>
area.<header>
区域。 In this case, the tap on the <header>
area doesn't output anything.<header>
区域不会 output 任何东西。 I've tried the hacks, like "add touchstart event for <body>
", "add temporary <div>
".我试过一些技巧,比如“为
<body>
添加 touchstart 事件”、“添加临时<div>
”。 None of them works.它们都不起作用。
Any idea on how to fix this?关于如何解决这个问题的任何想法? Thanks.
谢谢。
if you have an element with position:fixed and touch event doesn't work over it, try adding:如果你有一个带有 position:fixed 的元素并且触摸事件在它上面不起作用,请尝试添加:
pointer-events: none;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.