No events on masked Sprite

#1

I’m using HTML5 target and discovered today that a masked Sprite will not trigger MouseEvents (click or mouseDown). Is that the desired behaviour? Anyone know of a work-around?

#2

Here’s my workaround so far: use the graphics to draw a transparent object over the area I want to catch mouse events.
var eventCatcher = new Shape();
eventCatcher.graphics.beginFill(0x000000,0);
eventCatcher.graphics.drawRect(0,0,w,h);
eventCatcher.graphics.endFill();
addChild(eventCatcher);

#3

Do you have an example of code that would reproduce this problem?

#4

Well, it is part of an overall app but here is a simplified version to demo the MouseDown part. You might recognise some of your own code here. :slight_smile:

package;

import openfl.display.DisplayObject;
import openfl.display.Sprite;
import openfl.display.Shape;
import openfl.Assets;
import openfl.events.*;
import com.joshuagranick.slidedeck.SlideDeck;
import format.SVG;
import openfl.geom.Point;
import openfl.Lib;

class SlideDeckComponent extends Sprite {
	private var deck:SlideDeck;
	private var bLeft:Sprite;
	private var bRight:Sprite;
	private var mouseDownPoint:Point;
	private var mouseDownTime:Int;
	private var mask1:Shape;
	inline static var margin:Int = 20;
	public function new (w:Int, h:Int) {
		super();
		init(w,h);
	}
	public function init(w:Int,h:Int):Void {
		this.deck = new SlideDeck(w,h,false,false); //could substitute a generic Sprite here perhaps
		mask1 = new Shape();
		mask1.graphics.beginFill(0x000000);
		mask1.graphics.drawRect(0,0,w,h);
		mask1.graphics.endFill();
		
		bLeft = new Sprite();
		var svg1 = new SVG(Assets.getText("assets/nav/arrowLeft.svg")); 
		svg1.render(bLeft.graphics);
		bLeft.buttonMode = true;
		bLeft.useHandCursor = true;
		bLeft.addEventListener(MouseEvent.CLICK,onLeftClick);


		bRight = new Sprite();
		var svg2 = new SVG(Assets.getText("assets/nav/arrowRight.svg")); 
		svg2.render(bRight.graphics);
		bRight.buttonMode = true;
		bRight.useHandCursor = true;
		bRight.addEventListener(MouseEvent.CLICK,onRightClick);

		addChild(bLeft);
		mask1.x = bLeft.width + margin;
		this.deck.x = bLeft.width + margin;
		bRight.x = bLeft.width + margin + w + margin;
		addChild(mask1);
		addChild(this.deck);
		addChild(bRight);
		bRight.y = bLeft.y = h/2 - (bLeft.height/2);
		this.deck.mask = mask1;

		this.addEventListener (MouseEvent.MOUSE_DOWN, deck_onMouseDown);
	}
	
	private function deck_onMouseDown (event:MouseEvent):Void {
		
		mouseDownPoint = new Point (event.localX, event.localY);
		mouseDownTime = Lib.getTimer ();
		Lib.current.stage.addEventListener (MouseEvent.MOUSE_UP, deck_onMouseUp);
		
	}
	
	private function deck_onMouseUp (event:MouseEvent):Void {
		
		var differenceX:Float = event.stageX - mouseDownPoint.x;
		var differenceY:Float = event.stageY - mouseDownPoint.y;
		var differenceTime:Float = (Lib.getTimer () - mouseDownTime);// / 1000;
		
		if (Math.abs (differenceX) > Math.abs (differenceY) && Math.abs (differenceX) > 60 && differenceTime < 3000 && differenceTime > 200) {
			
			if (differenceX > 0) {
				
				this.deck.previousSlide ();
				
			} else {
				
				this.deck.nextSlide ();
				
			}


		}
		
		this.removeEventListener (MouseEvent.MOUSE_UP, deck_onMouseUp);
		
	}
	private function onLeftClick(e:MouseEvent):Void {
		this.deck.previousSlide();
	}
	private function onRightClick(e:MouseEvent):Void {
		this.deck.nextSlide();
	}
	public function gotoSlide(i:Int):Void {
		this.deck.gotoSlide(i);
	}
}