Touch screen klikt ongewild op link

[zoutepopcorn]

Ik heb een html pagina met een canvas erin (werkt met fabricjs). Hier kan op een vierkant geklikt worden en er wordt vervolgens een <div> als overlay opgemaakt. Hierop kan geklikt worden en dat werkt op de desktop.

Echter op een touchscreen wordt door de klik op het vierkant kennelijk ook meteen op de link die vervolgens opkomt.

Code:
Code, Fiddle

Groot om op een touchscreen te proberen
Fiddle groot (test)

Ik heb geprobeerd om even een sleep in te bouwen. Werkte niet
e.stopPropagation();
e.preventDefault();
Lukt niet want dan kan ik niet meer doorklikken

kortom, de touch die al geweest is werkt door op de link die ik nog laat zien . Iemand een idee wat mij verder in de richting kan brengen?

[NMe]

Niet onmousedown gebruiken maar onclick. Geldt ook voor je canvas trouwens: gewoon onclick gebruiken. Dat is op touchdevices gewoon transparant en werkt dus ook.

Overigens stellen we het op prijs als je je code niet alleen op jsFiddle zet zodat mensen die dit topic later terugvinden er ook nog wat aan hebben, zelfs als jsFiddle je code offline heeft getrokken.

[ Voor 91% gewijzigd door NMe op 01-11-2013 19:08 ]

[zoutepopcorn]

Bedankt voor de reactie.

Het is blijkbaar niet op te lossen in Fabricjs zelf. Dus maar een functie voor als er op het canvas wordt geklikt... Hij kijkt of er een icoon is aangeklikt en daarna opent het menu.

Heb heb nu maar zo opgelost:

HTML:

<div id="divMenu" onclick="displayMenu()"> <canvas id="menu" height="0" width="0"></canvas></div>

JavaScript:

function displayMenu() {
    // Only display menu when a item is clicked
    if(itemClicked) {
    itemClicked = false;
    document.getElementById("overlay").style.display = "";
    } 
}

function clickIcon(e) {
    selIcon = e.target.id;   
    itemClicked = true;
}

// Fabricjs javascript required code...
menu.on({
  'object:selected' : clickIcon
});