Xamarin WebView - 无法禁用双击事件答案

【问题标题】：Xamarin WebView - Can't Disable Double Click EventXamarin WebView - 无法禁用双击事件
【发布时间】：2019-11-17 10:44:04
【问题描述】：

我正在尝试禁用任何双击功能，在这种情况下，禁用双击 Instagram 图像以喜欢它的功能。我已经测试了一些 JavaScript 作为 chrome 扩展，它给了我正在寻找的结果，但是当我将它带入 Xamarin WebView 时，它不起作用。奇怪的是注入的 JavaScript 正在运行，因为如果我在其中有一个警报，它就会显示出来。它只是仍然喜欢 Instagram 上的图像。

这是 Chrome 扩展的 JavaScript

document.addEventListener("dblclick",handler,true);function handler(e) {
    e.stopPropagation();
    e.preventDefault(); }

这是 Xamarin 的代码

  string function = "document.addEventListener(\"dblclick\",handler,true);function handler(e){e.stopPropagation();e.preventDefault();}";
  Xamarin.Forms.Device.BeginInvokeOnMainThread(() => { webBrowser.Eval(function); });

更新：经过一些测试，我可以确认这是仅在运行该网站的移动版本时出现的问题。我不确定这是否与事件的触发方式或与此相关的其他问题有关，但这仅与移动设备有关。

【问题讨论】：

标签： javascript c# xamarin webview

【解决方案1】：

我创建了一个示例页面，其中只有一个 webview 来测试您的案例：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestApp.Page1" Appearing="Page1_OnAppearing">
    <WebView x:Name="TestWebView" />
</ContentPage>

在后面的代码中，我用一个按钮设置了静态 html，双击后会显示警报：

public Page1()
{
    InitializeComponent();

    // Set static html
    TestWebView.Source = new HtmlWebViewSource
    {
        Html = @"<html>
        <body>
        <button id='testbutton' style='font-size: 30px;'>Click me</button>

        <script type='text/javascript'>
        document.getElementById('testbutton').addEventListener('dblclick', function (e) {
          alert('double clicked');
        });
        </script>

        </body>
        </html>"
    };
}

在页面的 OnAppearing 事件中，我执行了 javascript 以防止双击事件处理程序：

private void Page1_OnAppearing(object sender, EventArgs e)
{
    var script = "document.addEventListener('dblclick',handler,true);function handler(e) { e.stopPropagation(); e.preventDefault(); }";
    TestWebView.Eval(script);
}

运行此代码后，双击我的测试按钮后仍然出现双击警报。这是因为 javascript-eval 运行得很早。或者换句话说：在执行 javascript 之前，您必须给 webview 多一点时间来加载内容：

private async void Page1_OnAppearing(object sender, EventArgs e)
{
    // Just wait a little bit before calling eval
    await Task.Delay(1000);

    var script = "document.addEventListener('dblclick',handler,true);function handler(e) { e.stopPropagation(); e.preventDefault(); }";
    TestWebView.Eval(script);
}

现在，警报不再出现。

让我知道这是否适用于您的情况。

编辑：另一种方法 也许问题是由 Instagram 页面的实现引起的。另一种禁用双击的方法是禁用 instagram-posts 上的整个事件。

您可以设置以下css-style 来禁用此功能：

style="pointer-events:none;"

所以你必须确定 div 元素的 xpath 并使用 javascript 设置样式，如下所示：

htmlElement.setAttribute("style", "pointer-events:none;");

我在浏览器（chrome 调试器）上对此进行了测试，它工作正常。但我不能通过应用程序确定这是否适用于您的情况。

【讨论】：

感谢您的帮助，但这对我来说似乎没有效果。另外，作为旁注，我在页面加载时没有运行脚本，它是由 Xaml 中的按钮触发的，因此在按下页面时应该很好地加载页面。我也想知道这是否可能与 Instagram 的移动网页有关，也许这可能会导致我的情况出现一些问题。
我怀疑这种情况是Instagram页面的执行造成的。也许他们使用不同的方式来检测双击。我用另一种方式编辑了我的答案。你能检查一下吗？