Highlighted

HTML5 Canvas, Function Works On Desktop, But Not iPad

Participant ,
Apr 18, 2020

Copy link to clipboard

Copied

Hello,

I have a function, addAircraft.  In that function, a graphic is added to an array object, and that object has an addEventListener "click" event that goes to a sub-function, selected.  When the object is clicked, the selected function is triggered, doing a bunch of code.

This process works on desktop machines, but it does not work on the iPad.  On the iPad, when I tap the object, nothing happens.

I am using createjs.Touch.enable(stage); at the top.  Does anyone have an idea why the selected sub-function works on a Desktop, but not iPad or touch devices?

createjs.Touch.enable(stage);

// ...a bunch of code ...

function addAircraft(aircraftFilename) {
	// --- Load external aircraft graphic, put it into an array object, and add it to the stage
	var imageLoader = new createjs.LoadQueue(false, null, true);
	imageLoader.loadManifest([{id:"loadID", src:imagesPath + "/" + aircraftFilename+".svg", type:"image"}]);

	imageLoader.addEventListener("complete", loadCompleteHandler);
	
	function loadCompleteHandler(e) {
		asa.push("");
		asa[asa.length-1] = new createjs.Bitmap(e.currentTarget.getResult("loadID"));
		hangarStage.boundingBox.addChild(asa[asa.length-1]);
		
		asa[asa.length-1].aircraftObject = imageLoader;
		
		// --- Make airplane selectable
		asa[asa.length-1].addEventListener("click", selected.bind(this));
	}
	
	// When aircraft graphic is clicked, make it the selectedAircraft
	function selected (e) { //THIS ONLY WORKS ON DESKTOP MACHINES WHEN CLICKED -- IPAD/CHROME DOESN'T WORK: NOTHING HAPPENS WHEN YOU TAP THE OBJECT
		selectedAircraft = e.target;
						
		// Do a bunch of code here, such as change the tint color of selectedAircraft
	}
}

Views

127

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 Canvas, Function Works On Desktop, But Not iPad

Participant ,
Apr 18, 2020

Copy link to clipboard

Copied

Hello,

I have a function, addAircraft.  In that function, a graphic is added to an array object, and that object has an addEventListener "click" event that goes to a sub-function, selected.  When the object is clicked, the selected function is triggered, doing a bunch of code.

This process works on desktop machines, but it does not work on the iPad.  On the iPad, when I tap the object, nothing happens.

I am using createjs.Touch.enable(stage); at the top.  Does anyone have an idea why the selected sub-function works on a Desktop, but not iPad or touch devices?

createjs.Touch.enable(stage);

// ...a bunch of code ...

function addAircraft(aircraftFilename) {
	// --- Load external aircraft graphic, put it into an array object, and add it to the stage
	var imageLoader = new createjs.LoadQueue(false, null, true);
	imageLoader.loadManifest([{id:"loadID", src:imagesPath + "/" + aircraftFilename+".svg", type:"image"}]);

	imageLoader.addEventListener("complete", loadCompleteHandler);
	
	function loadCompleteHandler(e) {
		asa.push("");
		asa[asa.length-1] = new createjs.Bitmap(e.currentTarget.getResult("loadID"));
		hangarStage.boundingBox.addChild(asa[asa.length-1]);
		
		asa[asa.length-1].aircraftObject = imageLoader;
		
		// --- Make airplane selectable
		asa[asa.length-1].addEventListener("click", selected.bind(this));
	}
	
	// When aircraft graphic is clicked, make it the selectedAircraft
	function selected (e) { //THIS ONLY WORKS ON DESKTOP MACHINES WHEN CLICKED -- IPAD/CHROME DOESN'T WORK: NOTHING HAPPENS WHEN YOU TAP THE OBJECT
		selectedAircraft = e.target;
						
		// Do a bunch of code here, such as change the tint color of selectedAircraft
	}
}

Views

128

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 18, 2020 0
Adobe Community Professional ,
Apr 19, 2020

Copy link to clipboard

Copied

don't use click on touch devices.  use mousedown.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 19, 2020 1
Participant ,
Apr 19, 2020

Copy link to clipboard

Copied

Hi klad, thank you -- I'll try this!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 19, 2020 0
kglad LATEST
Adobe Community Professional ,
Apr 20, 2020

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 20, 2020 0