dart MouseEvent toElement null

0
votes

in my program I generate buttons inside an HTML table each with the same onClick.listen listener defined.

In the listener, MouseEvent event.toElement is null.

The table is pre-created in HTML, but the table rows, row cells and buttons in the cells are all generated in dart.

How come event.toElement can be null?

If I try a clean sample app (new web application in dart editor) and create a button, add that to a div, then event.toElement is not null.

So I have a general question: when listening to the onClick event of a button, then receiving the MouseEvent, what can cause the MouseEvent's toElement property to be null?

I am running this in a browser (chrome and firefox) after compiling to JS.

EDIT: In the HTML file I linked the compiled JS script directly. Now I changed to link the dart script and the pakcages/browser/dart.js (as in sameple dart web apps). After this change, it works fine (event.toElement != null) in chromium and chrome, but not in firefox. Firefox still has event.toElement == null What to do??

CODE: HTML:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="sample_container_id">
      <p id="sample_text_id"></p>
    </div>
    <script type="application/dart" src="button_event.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

DART:

import 'dart:html';

void main() {

  ButtonElement b = new ButtonElement();
  b.text = 'Press Me';
  b.id = 'button_id';
  b.onClick.listen(onMarketButtonClick);
  querySelector('#sample_container_id').append(b);
}

void onMarketButtonClick(MouseEvent _event) {
 querySelector('#sample_text_id').text = _event.toElement.toString();
}

RESULT: In Chrome, clicking the button outputs 'button' In FireFox, clicking the button outputs 'null'

USE CASE: In the call back (onMarketButtonClick), I want to retrieve the button id and custom attributes of the button that was clicked, such that I can identify which button was clicked. Imagine a calculator app. Buttons of different numbers have different inner-html's and different custom attributes and/or ids. But all have the same onClick listener. When the listener is called, I need to identify which number was clicked. So I need access to the ButtonElement and its custom attributes and id and inner html etc. (custom attributes for more complex use cases than the calculator)

Thanks a lot, Imran

2
buttonnullmouseeventdart
Imran, It's a lot easier to figure out the problem when looking at actual code. Can you post some? - Shailen Tuli
@ShailenTuli : you are right...added code to the question :) - imran
What are you trying to do with onMarketButtonClick? - mert
Please see in the question, I have a added a use case to, apologies for not making that clear from the beginning - imran

2 Answers

1
votes

The Firefox property is called relatedEvent. Use that, and you won't get null.

I'm still not sure of the use case, but depending on what information you wanted, you could probably just use currentTarget or target:

querySelector('#sample_text_id').text = _event.currentTarget.toString();
querySelector('#sample_text_id').text = _event.target.toString();
1
votes

You can basically use EventTarget target property of MouseEvent (link). Here is a basic example:

import "dart:html";

void main() {
  document.body.append(new ButtonElement()..text="btn1"..id="btn1");
  document.body.append(new ButtonElement()..text="btn2"..id="btn2");
  document.onClick.listen((MouseEvent e) => (print(e.target.id)));
}

Whenever, mouse clicks you can check the type of target, which is button for your case. Then, you can do whatever you want with it.