时间戳

首页 > 解决方案 > 更改移动设备上的触摸事件行为

javascript - 更改移动设备上的触摸事件行为

问题描述

我有一个网页，它本质上是一个建立在给定 div 上的家谱，其中包含关于人和人之间的所有元素的所有元素，这些元素在这个 div 内完成了绝对定位。然后是导航栏和一些应该有固定位置的按钮。

现在，该站点可以很好地与桌面一起使用，在桌面上，人们可以在浏览器窗口内平移和缩放带有家谱的 div。

为了让它在移动设备上工作，我想依靠触摸事件。我接受了Chris Coyer网站的推荐，并在我的身体元素上做了以下事情：

body { touch-action: none }

以及带有家谱的 div (id="container")

#container { touch-action : auto }

目的是冻结网站的正常部分（导航栏和控件），并允许目标 div 通过触摸事件进行平移和缩放。

但这根本行不通。

有人可以给我正确方向的决定性提示吗？

非常感谢！

我在这里添加了网站的简化代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <div class="logo">
            <h4>The Nav</h4>
        </div>
         <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>
    <script src="app.js"></script>
</body>

</html>

然后样式表就像（简化）：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: none;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5d4954;
    font-family: 'Poppins', sans-serif;
}

如您所见，我将 touch-action: none 属性放在所有元素上。但对网站没有任何影响

https://rocky-refuge-29352.herokuapp.com/

标签： javascripthtmlcssmobile

解决方案

尝试使用特定属性而不是“auto”，如下所示：

#container { touch-action: pan-x pinch-zoom; }

推荐阅读