用 2 根手指滑动禁用 goback (1)

📌 相关文章

📜 用 2 根手指滑动禁用 goback (1)

📅 最后修改于: 2023-12-03 14:56:17.410000 🧑 作者: Mango

使用两根手指滑动禁用 goback

在移动设备上，几乎所有的应用都有一个返回前一个界面的功能，通常是通过一个物理返回键或者屏幕上的虚拟返回键来实现。然而，有时候用户会意外触发返回操作而返回到上一个界面，这会导致用户体验不佳。在这种情况下，禁用 goback 功能是非常有用的。

实现

我们可以通过 JavaScript 和 CSS 来实现禁用 goback 的功能。具体来说，我们需要监听触摸事件并判断触屏操作是否为两根手指滑动操作。如果是，我们就阻止默认的 goback 动作。下面是代码示例：

<!-- HTML 代码 -->
<body ontouchstart="handleTouchStart(event)" ontouchmove="handleTouchMove(event)">
  <!-- ... -->
</body>

// JavaScript 代码
var xDown = null;
var yDown = null;

function handleTouchStart(event) {
  xDown = event.touches[0].clientX;
  yDown = event.touches[0].clientY;
}

function handleTouchMove(event) {
  if (!xDown || !yDown) {
    return;
  }

  var xDiff = xDown - event.touches[0].clientX;
  var yDiff = yDown - event.touches[0].clientY;

  // 判断手指滑动方向
  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    // 左右滑动，禁用 goback 功能
    event.preventDefault();
  }

  // 重置起始触屏位置
  xDown = null;
  yDown = null;
}

在这段代码中，我们首先在触摸事件上注册了两个事件处理函数 handleTouchStart 和 handleTouchMove。接着，在 handleTouchStart 中，我们记录了触摸事件第一个触点的位置，并在 handleTouchMove 中，我们计算了该触点与当前触点的水平和垂直距离，并根据这两个值判断了手指滑动的方向。

如果手指左右滑动的距离大于手指上下滑动的距离，我们就阻止了默认的 goback 动作。为了避免在禁用 goback 后导致一些其它的不良后果，我们还需要重置起始触屏位置。

Markdown代码

# 使用两根手指滑动禁用 goback

在移动设备上，几乎所有的应用都有一个返回前一个界面的功能，通常是通过一个物理返回键或者屏幕上的虚拟返回键来实现。然而，有时候用户会意外触发返回操作而返回到上一个界面，这会导致用户体验不佳。在这种情况下，禁用 goback 功能是非常有用的。

## 实现

我们可以通过 JavaScript 和 CSS 来实现禁用 goback 的功能。具体来说，我们需要监听触摸事件并判断触屏操作是否为两根手指滑动操作。如果是，我们就阻止默认的 goback 动作。下面是代码示例：

\`\`\`html
<!-- HTML 代码 -->
<body ontouchstart="handleTouchStart(event)" ontouchmove="handleTouchMove(event)">
  <!-- ... -->
</body>
\`\`\`

\`\`\`javascript
// JavaScript 代码
var xDown = null;
var yDown = null;

function handleTouchStart(event) {
  xDown = event.touches[0].clientX;
  yDown = event.touches[0].clientY;
}

function handleTouchMove(event) {
  if (!xDown || !yDown) {
    return;
  }

  var xDiff = xDown - event.touches[0].clientX;
  var yDiff = yDown - event.touches[0].clientY;

  // 判断手指滑动方向
  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    // 左右滑动，禁用 goback 功能
    event.preventDefault();
  }

  // 重置起始触屏位置
  xDown = null;
  yDown = null;
}
\`\`\`

在这段代码中，我们首先在触摸事件上注册了两个事件处理函数 \`handleTouchStart\` 和 \`handleTouchMove\`。接着，在 \`handleTouchStart\` 中，我们记录了触摸事件第一个触点的位置，并在 \`handleTouchMove\` 中，我们计算了该触点与当前触点的水平和垂直距离，并根据这两个值判断了手指滑动的方向。

如果手指左右滑动的距离大于手指上下滑动的距离，我们就阻止了默认的 goback 动作。为了避免在禁用 goback 后导致一些其它的不良后果，我们还需要重置起始触屏位置。