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

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Copy link
Member

dgrove commented Jan 9, 2012

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

@vsmenon

This comment has been minimized.

Copy link
Member

vsmenon commented Apr 12, 2012

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

@DartBot

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Member

vsmenon commented Jun 22, 2012

Added this to the M1 milestone.

@iposva-google

This comment has been minimized.

Copy link
Contributor

iposva-google commented Aug 13, 2012

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

@vsmenon

This comment has been minimized.

Copy link
Member

vsmenon commented Aug 17, 2012

Removed the owner.

@blois

This comment has been minimized.

Copy link

blois commented Aug 24, 2012

Set owner to @blois.

@blois

This comment has been minimized.

Copy link

blois commented Aug 24, 2012

Added Accepted label.

@blois

This comment has been minimized.

Copy link

blois commented Aug 27, 2012

Added Fixed label.

This issue was closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.