PDA

View Full Version : [CLOSED] event not seen in FireFox



HansWapenaar
Aug 20, 2013, 8:41 AM
Hi,

I'am adjusting the drawing example 'Australia' in such a way that the user can click in the map. Based on the coordinates some other (mapping) action are then executed.
I added a click-listener:



sprite.Listeners.MouseOver.Handler = string.Format("onMouseOver(this, {0}, {1});", JSON.Serialize(colors[i]), i);
sprite.Listeners.MouseOut.Handler = "onMouseOut(this);";
sprite.Listeners.Click.Handler = "onClick(this, event);";


In the javascript section I added:



function onClick(sprite, e) {
var curX;
var curY;
if (e.pageX || e.pageY) {
curX = e.pageX;
curY = e.pageY;
} else if (e.clientX || e.clientY) {
curX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
curY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
alert('click: ' + curX + " " + curY);
}


This works in IE9/10 and Chrome. But in FireFox not reaction and result.

I tried adding lines like (suggestions found on internet):
var e= event || window.event;
or
var e = window.event ? event : e;

Only leaving event as a parameter makes FireFox popping up an alert, but than the click location is not returned.

Do you have any idea?

Hans Wapenaar

Daniil
Aug 20, 2013, 9:18 AM
Hi Hans,

Please use:

sprite.Listeners.Click.Handler = "onClick(this, e.browserEvent);";

There is no event parameter in a Click listener. Probably, Chrome and IE shares event in a global object (window), but FireFox doesn't.

HansWapenaar
Aug 20, 2013, 1:55 PM
Hi Daniil,

It works. Great!
You are right that IE and Chrome are using the global object.

One more difference that I found:

When there are sprites in the panel/drawcomponent and I check the offsetX / offsetY coordinates of the click position it looks like:
- in IE8 the relative position to the upper left corner of the sprite is returned (sprites of Path type),
- in IE9 the the relative position to the upper left corner of the panel/drawcomponent
- in FireFox the position is returned with e.layerX / e.layerY.

So I am looking for a way to get the click position in the panel/drawcomponent In IE8.

Hans Wapenaar

Daniil
Aug 21, 2013, 11:12 AM
You could get the Draw1, position by calling

App.Draw1.getXY()
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-method-getXY

Then you should be able to calculate the position of click.

HansWapenaar
Aug 21, 2013, 6:43 PM
Hi Daniil,

Your sugestion made it working:



var tempX;
var tempY;
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
} else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft;
tempY = e.clientY + document.body.scrollTop;
}
var xpos = 0;
var ypos = 0;
var xDraw = #{drawMap}.getXY();
xpos = tempX - xDraw[0];
ypos = tempY - xDraw[1];


I tested IE8, IE9, FireFox, Chrome.
Thanks a lot.

Hans

(Thread can be closed)