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

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

现在，该网站与台式机很好地配合使用，可以在浏览器窗口内与家谱围绕DIV放大。

为了使其在移动设备上工作，我想依靠触摸事件。我接受了克里斯·科耶(Chris Coyer(网站的建议，并在我的身体元素上做了以下内容：

body { touch-action: none }

和带有家谱的div(id ="容器"(

#container { touch-action : auto }

目的是冻结站点的普通部分(NAV栏和控件(，并允许在目标div上通过触摸事件进行PAN和放大。

但这根本不起作用。

有人可以给我决定朝正确方向提示。

非常感谢！

我在此处添加了网站的简化代码

<!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;
}

如您所见，我将触摸性：无属性在所有元素上。但是对网站根本没有影响

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

尝试使用特定属性而不是"自动"，如下所示：

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

相关内容

最新更新

热门标签：