HTML5 no Events Fired

Haxe
#1

Hello everyone,

with using the latest version of all packages:

actuate: 1.6.3 [1.8.6]
box2d: [1.2.3]
haxelib_client: [3.2.0-rc.3]
haxeui: [1.8.1]
hscript: [2.0.5]
hxcpp: [3.2.193]
layout: [1.2.1]
lime-samples: [2.6.0]
lime: [2.7.0]
openfl-samples: [3.3.1]
openfl: [3.4.0]
stablexui: [1.1.5]
swf: [2.1.3]

The following simple example for catching events does not produce any event on an html5 platform on OSX (after attempting to click on the req rectangle). I have tried the project on both chrome and safari browsers. Am I losing my sanity or did I just forget something trivial?

package;

import openfl.events.Event;
import openfl.events.MouseEvent;
import openfl.display.Sprite;

class Main extends Sprite
{
	public function new()
	{
		super();    
		addEventListener(Event.ADDED_TO_STAGE, init);
	}
 
	public function init(e:Event)
	{
		removeEventListener(Event.ADDED_TO_STAGE, init);

		var s = new Sprite();
		s.x = s.y = 0;
		s.width = s.height = 500;

		s.graphics.beginFill(0xFF0000);
		s.graphics.drawRect(0,0,500,500);
		s.graphics.endFill();

		s.addEventListener(MouseEvent.MOUSE_DOWN, test);
		s.addEventListener(MouseEvent.MOUSE_UP, test);
		s.addEventListener(MouseEvent.CLICK, test);

		stage.addChild(s);
	}

	public function test(e:MouseEvent)
	{
		trace(e);
	}
}
#2

is init being called?

What if you use addChild (s) instead of stage.addChild (s), does it make a difference?

EDIT: You can also try in the latest versions, released today

#3

I checked and init is called (the rectangle is drawn). Even with the addChild instead of stage.addChild, the same problem occurs…no events being fired.

I have a stock setup on my mac, and can’t make any sense of this issue. Can anyone reproduce? Does the example work on your setups for the html5 target?

EDIT: Yesterday, I have updated the libs. Same issue.

#4

Can you try with MouseEvent.MOUSE_OVER ?

EDIT : I asked this because this event fires better in html5 (especialy on mobile) in my tests but anyway this is not the problem here. See my next message.

#5

Just did, I have added:
s.addEventListener(MouseEvent.MOUSE_OVER, test); s.addEventListener(MouseEvent.MOUSE_OUT, test);
Same issue, no event whatsoever. Does it work on your own html5 test?

#6

Delete the following line : s.width = s.height = 500;

It’s seems that it’s the origin of your bug (I tried).

#7

Interesting…you are right! If I remove the height and width settings, it works. The only question now is…how to control the size of the element?

#8

I have narrowed down on the problem. The following code produces no events:

var s = new Sprite();
s.x = s.y = 0;
s.width = s.height = 500;

s.graphics.beginFill(0xFF0000);
s.graphics.drawRect(0,0,500,500);
s.graphics.endFill();

However, this code snippet works just fine:

var s = new Sprite();
s.x = s.y = 0;

s.graphics.beginFill(0xFF0000);
s.graphics.drawRect(0,0,500,500);
s.graphics.endFill();
s.width = s.height = 500;

It seems that setting the height and width before drawing causes the bug to occur.

#9

s.graphics.drawRect(0,0,WIDTH,HEIGHT);

You have already this line to set the width and height.

Maybe you can try to change the width and height with s.width = s.height = 500; (but put this line after s.graphics.endFill();) Is the bug still occurs if you put the buggy line after creating the graphics?

#10

No, if the line is after endFill, it works fine. Strange…

#11

Not surprising.

  1. You make a new sprite with width 0.
  2. You set the width to 500.
  3. OpenFL calculates the scale necessary to get the width you’ve chosen. This means dividing the new width by the sprite’s old width.
  4. In JavaScript, 500 / 0 comes out to +infinity.
  5. The sprite’s scale is set to +infinity.
  6. OpenFL isn’t designed to handle this situation.
#12

Sounds like we probably need a little guard to avoid this problem :slight_smile: