Need to get mouse events inside webview Win 10 UWP
Question
I am creating a win 10 UWP application.
<Grid>
<WebView x:Name="WebViewElm"/>
</Grid>
I have added a webview in it and I need to get the mouse right click and drag drop events for the webview element. But now it is taking the events for the browser. How I can handle the input events in the webview
1 answers
solution1
1 ACCPTED 2016-05-11 18:58:45
Sample of how to drag element from XAML to WebView. It's not complete solution, but might be helpful for you.
XAML:
<StackPanel Orientation="Vertical" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<WebView DefaultBackgroundColor="LightGray" Source="ms-appx-web:///HTMLPage1.html" PointerReleased="WebViewElm_PointerReleased" Width="300" Height="300" x:Name="WebViewElm"></WebView>
<TextBlock x:Name="txtZiel" DragOver="txtZiel_DragOver" PointerReleased="txtZiel_PointerReleased" >2</TextBlock>
</StackPanel>
C# code:
private async void WebViewElm_PointerReleased(object sender, PointerRoutedEventArgs e)
{
await WebViewElm.InvokeScriptAsync("callFromExternal", new string[] { txtZiel.Text });
}
private async void WebViewElm_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
await WebViewElm.InvokeScriptAsync("LoadingFinished", null);
}
HTML:
<body>
<p id="txtClick">1</p>
</body>
JavaScript:
function callFromExternal(somedrag) {
document.getElementById("txtClick").innerHTML = somedrag;
}
The only thing you need is to check is mouse over paragraph element in your JavaScript code.
If you want to check events inside JavaScript code you can add NavigationCompleted="WebViewElm_NavigationCompleted" and ScriptNotify="WebViewWithJSInjection_ScriptNotify" attributes to your WebView and C# events
private async void WebViewElm_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
await WebViewElm.InvokeScriptAsync("LoadingFinished", null);
}
private void WebViewWithJSInjection_ScriptNotify(object sender, NotifyEventArgs e)
{
// here in e.Value you can get string with document.getElementById("txtClick").innerHTML
}
In JavaScript add functions:
function LoadingFinished()
{
document.getElementById('txtClick').addEventListener("mousedown", callExternal);
}
function callExternal()
{
window.external.notify(document.getElementById("txtClick").innerHTML);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.