更改移动设备上的触摸事件行为答案

【问题标题】：Change touch event behaviour on mobile更改移动设备上的触摸事件行为
【发布时间】：2019-05-02 20:34:23
【问题描述】：

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

现在，该网站在桌面上运行良好，人们可以在浏览器窗口内平移和缩放 div，家谱在其中。

为了让它在移动设备上工作，我想依靠触摸事件。我接受了Chris Coyer's site 的推荐，并在我的 body 元素上做了以下操作：

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/

【问题讨论】：

请提供一个最小、完整且可验证的示例 (MCVE)。
你好 Jimmy，我添加了上面网站的简约内容。我在这个试验中只使用了 touch-action: none 来禁止所有的触摸事件。但没有成功！

标签： javascript html css mobile

【解决方案1】：

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

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

【讨论】：

不幸的是，这没有帮助。该站点仍然像以前一样对捏和平移作出反应。我首先需要解决我的导航栏和控制按钮像铬一样固定。