gpt4 book ai didi

javascript - 位置 : fixed; element doesn't work correctly on iOS 上的触摸事件

转载 作者:行者123 更新时间:2023-12-04 14:19:31 24 4
gpt4 key购买 nike

这是与 IOS 5 (safari) bug with HTML touch events on "position:fixed" div 类似的问题

有人说这个bug已经修复了。但是,在 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>页面停止滚动之前的区域。

  • 在这两种情况下,有时您都会发现“轻按 UNDER 内容”。当您点击 <header> 时输出区域。

    更新:

    有第三种情况:
  • 在 .content 区域上滑动,然后在页面停止滚动之前再次快速点击 .content 区域,然后点击 <header>区域。在这种情况下,点击 <header> area 不输出任何东西。

  • 我已经尝试了一些技巧,比如“为 <body> 添加 touchstart 事件”、“添加临时 <div>”。它们都不起作用。

    关于如何解决这个问题的任何想法?谢谢。

    最佳答案

    如果您有一个带有 position:fixed 的元素并且触摸事件无法处理它,请尝试添加:

    pointer-events: none;

    关于javascript - 位置 : fixed; element doesn't work correctly on iOS 上的触摸事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28081826/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com