触摸以停止动量滚动也会触发 Web 视图中的点击事件

Question

如果我们在网页视图中进行动量滚动，当我们触摸/点击屏幕时，它会停止动量滚动。但它也在 webview 内容中执行点击事件。我想让webview像这样：在动量滚动期间，如果用户点击webview，它只会停止滚动而不会触发点击，然后在第二次点击时它将对webview内容执行任何点击事件。

任何人都可以建议我该怎么做吗？

Answer 1

您可以通过使用 JavaScript 处理触摸事件在 WebView 中实现此行为。这是一个逐步解决方案：

检测点击事件： 使用 JavaScript 检测 WebView 内容上的点击事件。您可以利用 touchstart 和 touchend 事件来跟踪用户交互。

javascript
Copy code
let touchStartTime = 0;
let touchStartY = 0;

document.addEventListener('touchstart', (event) => {
  // Record the start time and vertical position
  touchStartTime = Date.now();
  touchStartY = event.touches[0].clientY;
});

停止动量卷轴： 响应第一次点击 (touchstart)，使用 JavaScript 停止动量滚动。这可以通过阻止事件的默认行为来完成。

javascript
Copy code
document.addEventListener('touchend', (event) => {
  event.preventDefault();  // Stop momentum scroll
  // (Remaining code for detecting a click event)
});

检查点击事件： 停止动量滚动后，跟踪第二次点击（touchend）并判断是否为点击事件。这可以通过计算 touchstart 和 touchend 事件之间的时间和距离来完成。

javascript
Copy code
// (Previous code)
document.addEventListener('touchend', (event) => {
  // (Previous code)
  // Calculate the time and vertical distance
  // Define thresholds for a click event
  if (timeDiff < timeThreshold && distance < distanceThreshold) {
    // This is considered a click event
    // Perform your desired action here (e.g., navigate to a link)
  } else {
    // This is not a click event; momentum scroll is already stopped
  }
});

执行点击操作： 如果确定第二次点击是单击事件，则在 WebView 中触发所需的操作，例如导航到链接或执行任何其他操作。 请记住调整时间和距离阈值以适应应用程序的响应能力和用户体验。