Flutter_web detect mouse hover and click in HtmlElementView - flutter-web

Question

I am using flutter web to parse some website.
I need to detect the mouse hover and click inside a htmlElementView and then get the corresponded element. I tried to listen the onMouseUp() but it didn't work. can you give me advise?
Widget myfunc(){
ui.platformViewRegistry.registerViewFactory(
'my-html',
(int viewId) => IFrameElement()
..style.border = 'none'
..srcdoc = webData
..onMouseUp.listen((event) {
print('onMouseUp => $event');
})
..onSelect.listen((event) {
print('onSelect => $event');
})
..onMouseDown.listen((event) {
print('onMouseDown=> $event');
})
..onMouseEnter.listen((event) {
print('onMouseEnter => $event');
})
);
return HtmlElementView(
viewType:'my-html',
);
}
I plan to follow this post to extract the element, but it only work outside of htmlElementView().
How to get the selected text or the inner html in Dart

Answer 1

I don't find what is wrong but I use followed solution as an alternate.
I insert the JavaScript and listen to postMessage() on Dart side.
Step 1. add postMessage() in the HTML. I parse entire web HTML and insert the event.
var newElement = html.Element.html(element.outerHtml);
print('newElement=> ${newElement.outerHtml}');
newElement.attributes['onmouseover'] = 'window.parent.postMessage(this.id, \'*\')';
Step 2. Add the listener on the Dart side.
#override
void initState(){
super.initState();
html.window.onMessage.listen( listen);
}
void listen(dynamic event) {
print('listen...');
var data = (event as html.MessageEvent).data;
print(data);
}