Xamarin.Forms iOS WebView如何将双击事件传递至JavaScript？

Hey there, let's break down why your double-click isn't firing in the iOS Xamarin.Forms WebView and fix it step by step!

The Root Causes #

First off, two key issues are blocking your Foo function from triggering on double-taps:

1. iOS WebKit's default double-tap zoom: The system prioritizes its own double-tap behavior (like zooming the page) over your custom click listener, so the event never reaches your code.
2. Mobile click event limitations: The click event has a 300ms delay on mobile, and iOS treats two rapid clicks as a single double-tap action—meaning it won’t fire two separate click events for you to detect.

Step 1: Disable Default Double-Tap Zoom #

You need to stop the system from hijacking the double-tap event first. Here are two ways to do it:

Option A: Use a Meta Tag in Your Web App

Add this to the <head> of your web page’s HTML to disable all user scaling (including double-tap zoom):

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Option B: Custom WebView Renderer (For Partial Scaling Control)

If you want to keep pinch-to-zoom but disable double-tap zoom, create a custom renderer in your iOS project:

using Xamarin.Forms.Platform.iOS;
using WebKit;

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            if (NativeView is WKWebView webView)
            {
                webView.ScrollView.MinimumZoomScale = 1.0f;
                webView.ScrollView.MaximumZoomScale = 1.0f;
                webView.ScrollView.BouncesZoom = false;
            }
        }
    }
}

Step 2: Use Touch Events for Double-Tap Detection #

Ditch the click event entirely—mobile touch events are far more reliable for detecting double-taps. Here’s a jQuery implementation you can drop into your web app:

let lastTouchTimestamp = 0;
const DOUBLE_TAP_THRESHOLD = 300; // Adjust this for sensitivity (ms)

// Listen for touch starts to detect double-taps
$(document).on('touchstart', '.your-target-element', function(e) {
    const currentTime = new Date().getTime();
    const timeSinceLastTap = currentTime - lastTouchTimestamp;

    // Check if this is a second tap within the threshold
    if (timeSinceLastTap > 0 && timeSinceLastTap <= DOUBLE_TAP_THRESHOLD) {
        e.preventDefault(); // Block default system behavior
        Foo(); // Trigger your double-tap callback
    }

    lastTouchTimestamp = currentTime;
});

// Optional: Add single-tap handling (if needed)
$(document).on('touchend', '.your-target-element', function() {
    setTimeout(() => {
        // If no second tap comes within the threshold, it's a single tap
        if (new Date().getTime() - lastTouchTimestamp > DOUBLE_TAP_THRESHOLD) {
            // Your single-tap logic here (e.g., SingleTapFunction())
        }
    }, DOUBLE_TAP_THRESHOLD + 10);
});

• Replace .your-target-element with the actual selector for your clickable elements.
• Tweak DOUBLE_TAP_THRESHOLD if you want to make the double-tap more or less sensitive.

Quick Note: Why Not Stick With click? #

If you’re dead set on using click, you’d have to intercept double-taps at the Xamarin.Forms level (via gesture recognizers) and then call your Foo function through a JS bridge. This is way more complex than using touch events directly, so it’s not recommended.

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