prince_happy 2014-08-29 01:49 采纳率: 0%
浏览 4883

阻止移动端浏览器html5页面滑动等手势

怎么才能阻止移动端浏览器的滑动等手势行为，比如左右滑动切换页面，双指放大页面html5！
hammer.js里面的stopDefaultBrowserBehavior怎么调用啊，有用吗？

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-02 13:10
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    HTML5页面滑动等手势是由于用户通过手指在屏幕上滑动来导航网页。为了防止这种行为，可以使用JavaScript和HTML5 API（例如touchstart, touchmove, 和 touchend) 来处理用户的触摸事件。

    以下是一个简单的例子，展示了如何在点击一个按钮时阻止页面的滑动：

    <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            touch-action: pan-y;
        }
    </style>
</head>
<body>
    <button id="slideButton">Slide Me!</button>

    <script>
        document.getElementById('slideButton').addEventListener('click', function(event) {
            event.preventDefault();
        });
    </script>
</body>
</html>

    在这个例子中，我们添加了一个ID为sliButton的按钮，并为其添加了一个点击事件监听器。当用户点击这个按钮时，它会阻止页面的滑动行为。

    关于hammer.js插件，它确实可以帮助你管理触控设备上的手势操作，包括滑动、旋转等。然而，它的实现方式可能会比上面的例子更复杂一些。如果你需要使用hammer.js，你需要安装并引入它，然后根据需要修改其配置以满足你的需求。

    以下是一段使用hammer.js的例子：

    var Hammer = require('hammerjs');

document.addEventListener("DOMContentLoaded", function() {

  var hammer = new Hammer(document);
  hammer.get('swipe').set({
    threshold: 0.8,
    minVelocity: 100
  });

  // 当触摸开始时，禁止滑动
  hammer.on('swipeStart', function(e) {
    e.preventDefault();
  });
});

    这段代码首先加载了hammer.js库，然后创建了一个新的Hammer实例，并设置了滑动检测阈值和最小速度。最后，当触摸开始时，它会阻止滑动。

    评论

报告相同问题？

悬赏问题

  • ¥15 有两个非常“自以为是”烦人的问题急期待大家解决！
  • ¥30 STM32 INMP441无法读取数据
  • ¥15 R语言绘制密度图，一个密度曲线内fill不同颜色如何实现
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥15 pyqt信号槽连接写法
  • ¥500 把面具戴到人脸上，请大家贡献智慧，别用大模型回答，大模型的答案没啥用
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急