xamarin.forms 处理 WebView 上的 Clicked 事件 [英] xamarin.forms Handle Clicked event on WebView

问题描述

我想处理 WebView 控件上的点击/点击事件

我试过 GestureRecognizers 但没有任何反应，我想也许 WebView 有某种方式使事件处理为真实".

<WebView.GestureRecognizers><TapGestureRecognizerTapped="OnWebViewClick"NumberOfTapsRequired="1"/></WebView.GestureRecognizers></WebView>

我也尝试过使用 C# 代码，但没有运气:/

解决方案

您可以使用

或者，您也可以绑定 ClickCommand 属性以使用 MVVM 模式实现这一点.

I want to handle the click/tap event on a WebView control

I've tried the GestureRecognizers but nothing happens, i think maybe the WebView has some sort of making the event handled "true".

<WebView>
   <WebView.GestureRecognizers>
      <TapGestureRecognizer
              Tapped="OnWebViewClick"
              NumberOfTapsRequired="1" />
   </WebView.GestureRecognizers>
</WebView>

And I've tried it using c# code behind too but no luck :/

解决方案

You can use the HybridWebView from XLabs, and use javascript injection to invoke and handle clicks in your Xamarin control. The injected javascript code can add a click-event listener at capture stage. When a click is detected it uses Native callback to send information back to C# code.

For example - you can define a custom control like this:

public class ClickEventArgs : EventArgs
{
    public string Element { get; set; }
}

public class ClickableWebView : XLabs.Forms.Controls.HybridWebView
{
    public event EventHandler<ClickEventArgs> Clicked;

    public static readonly BindableProperty ClickCommandProperty =
        BindableProperty.Create("ClickCommand", typeof(ICommand), typeof(ClickableWebView), null);

    public ICommand ClickCommand
    {
        get { return (ICommand)GetValue(ClickCommandProperty); }
        set { SetValue(ClickCommandProperty, value); }
    }

    public ClickableWebView()
    {
        LoadFinished += (sender, e) => 
            InjectJavaScript(@"
            document.body.addEventListener('click', function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                Native('invokeClick', 'tag='+target.tagName+' id='+target.id+' name='+target.name);
            }, true /* to ensure we capture it first*/);
        ");

        this.RegisterCallback("invokeClick", (string el) => {
            var args = new ClickEventArgs { Element = el };

            Clicked?.Invoke(this, args); 
            ClickCommand?.Execute(args);
        });
    }
}

Sample XAML usage

<local:ClickableWebView 
    Uri="https://google.com" 
    Clicked="Handle_Clicked"
/>

and sample code-behind

void Handle_Clicked(object sender, CustomWebView.ClickEventArgs e)
{
    Xamarin.Forms.Application.Current.MainPage.DisplayAlert("WebView Clicked", e.Element, "Dismiss");
}

** Output **

Alternatively, you can also bind ClickCommand property to implement this using MVVM pattern.

这篇关于xamarin.forms 处理 WebView 上的 Clicked 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！