Does Dart have childSelector in event function like jQuery on()?

Question

Does Dart have childSelector in event function like jQuery on()? Because I want fire contextmenu event only if mouse hover specific element type.

This is my javascript code.

 var $contextMenu = $("#context-menu");
 $("body").on("contextmenu", "table tr", function(e) {
 $contextMenu.css({
     display: "block",
     left: e.pageX,
     top: e.pageY });
   return false;
 });

But I don't know how to check if hover "table tr" in my Dart code.

 var body = querySelector('body');
 var contextMenu =querySelector('#context-menu');
 // fire in everywhere 
 body.onContextMenu.listen((e) {
    e.preventDefault();
    contextMenu.style.display = 'block';
    contextMenu.style.left = "${e.page.x}px";
    contextMenu.style.top  =  "${e.page.y}px";     
 }

Answer 1

You can filter events :

body.onContextMenu.where((e) => e.target.matchesWithAncestors("table tr"))
    .listen((e) {
   e.preventDefault();
   contextMenu.style.display = 'block';
   contextMenu.style.left = "${e.page.x}px";
   contextMenu.style.top  =  "${e.page.y}px";
});

Answer 2

the problem is the following:

$("body") gives you a set of elements that does not change. The `.on(..., 'sub selector') however is actually bad, because it checks the subselector against the target of the event EVERY TIME for every event.

I see two solutions here:

The first is to select all children and add the event listener to all of the elements:

var body = querySelector('body');
body.querySelectorAll('table tr')... onContextMenu...

But this will not work if you insert tr into the table later.

The other way is to check the .target of your event and see if it's a tr and if its in your table. I hope this already helps. If you need more detailed help let me know!

Regards Robert