Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MouseEvent.offsetX not working in firefox #1087

Closed
DartBot opened this issue Jan 7, 2012 · 12 comments
Closed

MouseEvent.offsetX not working in firefox #1087

DartBot opened this issue Jan 7, 2012 · 12 comments
Assignees
Labels
web-libraries Issues impacting dart:html, etc., libraries
Milestone

Comments

@DartBot
Copy link

DartBot commented Jan 7, 2012

This issue was originally filed by Peter.p...@gmail.com


What steps will reproduce the problem?

  1. Create a new project with the dart IDE
  2. Change the main method to
    {{{

void main() {
  document.query('body').on.mouseDown.add((MoueseEvent e) {
    document.query('#status').innerHTML = e.offsetX + ", " + e.offsetY;
  });
}

}}}

  1. Test in Firefox by clicking on any element

What is the expected output? What do you see instead?

Expected result:
  offsetX should not be undefined
  #status field should show mouse coordinates

Actual result:
  Error: val1 is undefined
  Source File: ..../Bug.dart.app.js
  Line: 83

What version of the product are you using? On what operating system?
Dart Editor: 0.1.0.201112130441, Build 2380
Firefox: 9.0.1
OS: Ubuntu

Please provide any additional information below.

  • Works fine with chrome.
@dgrove
Copy link
Contributor

dgrove commented Jan 9, 2012

Set owner to @rakudrama.
Added Area-UI, Triaged labels.

@vsmenon
Copy link
Member

vsmenon commented Apr 12, 2012

Removed Area-UI label.
Added Area-DOM label.

@DartBot
Copy link
Author

DartBot commented Apr 21, 2012

This comment was originally written by @bp74


Just found the same problem. The reason is that Firefox does not set the "offsetX" and "offsetY" properties. The question is: should i do a workaround in my code or will the Dart2JS compiler add a workaround?

I think the Dart2JS compiler should fix it, because people expect a consistent behaviour of Dart-objects (events) in all browsers.

@DartBot
Copy link
Author

DartBot commented Apr 21, 2012

This comment was originally written by @bp74


I found the following post on the bugzilla forum. It would be great if frog could generate code like this:

https://bugzilla.mozilla.org/show_bug.cgi?id=69787#c37

Btw. i have tried to write a workaround in Dart, but it is really hard! You have to check all "offsetParent" of the element (in my case a Canvas) and than you have to call "element.rect" and get a Future<ElementRect> ... now you have to wait for all futures to complete, sum up all the "offset.left" and "offset.top" and now you have the coordinates of your element. Of course you can't do this when the mouse-events fires because you have to know the result right in the event handler ... very very hard!

@DartBot
Copy link
Author

DartBot commented Apr 21, 2012

This comment was originally written by @bp74


Here is the code i use to calculate to location of an element, is there a more simple way?

  Future<Point> _calculateElementLocation(html.Element element)
  {
    Completer<Point> completer = new Completer<Point>();
    
    element.rect.then((rect)
    {
      Point point = new Point(rect.offset.left, rect.offset.top);
      
      if (element.offsetParent != null)
        _calculateElementLocation(element.offsetParent).then((p) => completer.complete(point.add(p)));
      else
        completer.complete(point);
    });
    
    return completer.future;
  }

@DartBot
Copy link
Author

DartBot commented May 15, 2012

This comment was originally written by @bp74


Found a much better solition on StackOverflow:
http://stackoverflow.com/questions/10564350/how-do-you-get-the-x-and-y-from-a-mouse-click-on-an-html5-canvas-in-dart

_canvas.rect.then((ElementRect rect) {
  _canvasLocation = new Point(rect.bounding.left, rect.bounding.top);
});

@vsmenon
Copy link
Member

vsmenon commented Jun 22, 2012

Added this to the M1 milestone.

@iposva-google
Copy link
Contributor

Removed Area-DOM label.
Added Area-HTML label.

@vsmenon
Copy link
Member

vsmenon commented Aug 17, 2012

Removed the owner.

@blois
Copy link
Contributor

blois commented Aug 24, 2012

Set owner to @blois.

@blois
Copy link
Contributor

blois commented Aug 24, 2012

Added Accepted label.

@blois
Copy link
Contributor

blois commented Aug 27, 2012

Added Fixed label.

@DartBot DartBot added Type-Defect web-libraries Issues impacting dart:html, etc., libraries labels Aug 27, 2012
@DartBot DartBot added this to the M1 milestone Aug 27, 2012
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
web-libraries Issues impacting dart:html, etc., libraries
Projects
None yet
Development

No branches or pull requests

5 participants