如何阻止拖动HTML5进度条（非手柄）时UIPageViewController翻页？

要解决这个手势误判的问题，核心是让UIPageViewController能区分用户是要拖动滑块还是翻页，下面几个方案可以直接用：

方案一：JS+原生配合，动态禁用/启用翻页手势 #

通过给WebView注入JS监听滑块的交互事件，通知iOS端暂时关闭翻页手势，操作结束后再恢复。

1. 给WebView注入这段JS代码，监听滑块的触摸和鼠标事件：

// 监听所有range滑块的交互
document.querySelectorAll('input[type="range"]').forEach(range => {
    // 触摸事件
    range.addEventListener('touchstart', () => {
        window.webkit.messageHandlers.rangeSliderInteract.postMessage('start');
    });
    range.addEventListener('touchend', () => {
        window.webkit.messageHandlers.rangeSliderInteract.postMessage('end');
    });
    // 兼容鼠标操作
    range.addEventListener('mousedown', () => {
        window.webkit.messageHandlers.rangeSliderInteract.postMessage('start');
    });
    range.addEventListener('mouseup', () => {
        window.webkit.messageHandlers.rangeSliderInteract.postMessage('end');
    });
});

2. iOS端实现消息接收逻辑，控制翻页手势：

class YourVC: UIViewController, WKScriptMessageHandler {
    var pageVC: UIPageViewController!
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard let action = message.body as? String else { return }
        switch action {
        case "start":
            // 禁用翻页手势
            pageVC.dataSource = nil
            pageVC.gestureRecognizers?.forEach { $0.isEnabled = false }
        case "end":
            // 恢复翻页手势（假设当前VC是pageVC的dataSource）
            pageVC.dataSource = self
            pageVC.gestureRecognizers?.forEach { $0.isEnabled = true }
        default: break
        }
    }
    
    // 初始化WebView时记得注册消息处理器
    func setupWebView() {
        let userContentCtrl = WKUserContentController()
        userContentCtrl.add(self, name: "rangeSliderInteract")
        let config = WKWebViewConfiguration()
        config.userContentController = userContentCtrl
        let webView = WKWebView(frame: view.bounds, configuration: config)
        // 加载你的HTML内容
    }
}

方案二：通过手势代理判断触摸位置 #

给UIPageViewController的翻页手势加代理，在手势触发前检查触摸点是否在滑块上，是的话就阻止手势生效。

1. 实现手势代理逻辑：

extension YourVC: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        guard let webView = touch.view as? WKWebView else { return true }
        let touchPoint = touch.location(in: webView)
        
        // 用JS查询触摸点是否在range滑块上
        webView.evaluateJavaScript("""
            document.elementsFromPoint(\(touchPoint.x), \(touchPoint.y)).some(el => el.tagName === 'INPUT' && el.type === 'range')
        """) { [weak self] result, _ in
            guard let self = self, let isOnSlider = result as? Bool, isOnSlider else { return }
            gestureRecognizer.isEnabled = false
            // 延迟恢复手势，避免影响后续操作
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                gestureRecognizer.isEnabled = true
            }
        }
        return true
    }
}

2. 给翻页手势设置代理：

pageVC.gestureRecognizers?.forEach { $0.delegate = self }

方案三：自定义WebView拦截触摸事件 #

继承WKWebView，重写触摸判断方法，直接拦截滑块区域的触摸事件，不让它传递给UIPageViewController。

class CustomWebView: WKWebView {
    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        var isOnSlider = false
        // 同步查询触摸点是否在滑块上（注意：同步JS调用可能阻塞主线程，建议提前缓存滑块位置优化）
        let semaphore = DispatchSemaphore(value: 0)
        evaluateJavaScript("""
            document.elementsFromPoint(\(point.x), \(point.y)).some(el => el.tagName === 'INPUT' && el.type === 'range')
        """) { result, _ in
            isOnSlider = result as? Bool ?? false
            semaphore.signal()
        }
        semaphore.wait()
        
        return isOnSlider ? self : super.hitTest(point, with: event)
    }
}

注意：方案三的同步JS调用可能影响性能，建议优化成提前通过JS获取所有滑块的位置坐标，缓存到iOS端，之后直接用坐标判断，不用每次都调用JS。

内容的提问来源于stack exchange，提问作者karlingen