需要在webview Win 10 UWP内获取鼠标事件 [英] Need to get mouse events inside webview Win 10 UWP
问题描述
< Grid>
< WebView x：Name =WebViewElm/>
< / Grid>
我已经添加了一个网页视图，我需要点击鼠标右键拖动事件webview元素。但现在它正在浏览浏览器的事件。如何处理webview中的输入事件
如何将元素从XAML拖动到WebView的示例。这不是完整的解决方案，但可能对您有帮助。
XAML：
< StackPanel Orientation =Vertical ={ThemeResource ApplicationPageBackgroundThemeBrush}>
< WebView DefaultBackgroundColor =LightGraySource =ms-appx-web：///HTMLPage1.htmlPointerReleased =WebViewElm_PointerReleasedWidth =300Height =300x：Name =WebViewElm >< / web视图>
< TextBlock x：Name =txtZielDragOver =txtZiel_DragOverPointerReleased =txtZiel_PointerReleased> 2< / TextBlock>
< / StackPanel>
C＃代码：
私有async void WebViewElm_PointerReleased（object sender，PointerRoutedEventArgs e）
{
等待WebViewElm.InvokeScriptAsync（callFromExternal，new string [] {txtZiel.Text}）;
}
private async void WebViewElm_NavigationCompleted（WebView sender，WebViewNavigationCompletedEventArgs args）
{
等待WebViewElm.InvokeScriptAsync（LoadingFinished，null）;
}
HTML：
<身体GT;
< p id =txtClick> 1< / p>
< / body>
JavaScript：
code> function callFromExternal（somedrag）{
document.getElementById（txtClick）。innerHTML = somedrag;
}
您唯一需要检查的是鼠标在JavaScript中的段落元素代码
如果要检查JavaScript代码中的事件，您可以添加 NavigationCompleted =WebViewElm_NavigationCompleted和 ScriptNotify =WebViewWithJSInjection_ScriptNotify 属性到您的WebView和C＃事件
private async void WebViewElm_NavigationCompleted（WebView sender，WebViewNavigationCompletedEventArgs args）
{
等待WebViewElm.InvokeScriptAsync（LoadingFinished，null）;
}
private void WebViewWithJSInjection_ScriptNotify（object sender，NotifyEventArgs e）
{
//在e.Value中，您可以使用document.getElementById（txtClick ）.innerHTML
}
在JavaScript中添加功能：
function LoadFinished（）
{
document.getElementById（'txtClick'）。addEventListener（mousedown，callExternal）;
}
函数callExternal（）
{
window.external.notify（document.getElementById（txtClick）。innerHTML）;
}
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
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);
}
这篇关于需要在webview Win 10 UWP内获取鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
