Add touch event to html img control - html

Question

I am trying to add a touch event to an img control on my html5 page.
This is what I have so far:
<img
src="Images/Home-icon.png"
onclick="Menu_Click('Home');"
ontouchend="Menu_Click('Home');"
draggable="false"
cssclass="iconImageStyle"
style="cursor: pointer;"
alternatetext="Home"
tooltip="Home"
height="32"
width="32" />
The click event from a normal web browser works properly.
But when I try to access it from my ipad, it does not react.
Help would be very welcomed.
Edit 1
Still no luck so far.
I tried to surround the img with a div and add the touchend event to the div, but it was not responding to it neither.
Edit 2
I followed a tutorial that works on my ipad.
Basically the tutorial is a canvas that displays the coordinates of the touch events inside the canvas.
I simply added the canvas and javascript to my page and let it overlap some of my img buttons.
My page reacts to the touch events and the canvas displays the coordinates properly.
Now this is where it is getting weird.
The buttons that appear inside the canvas now reacts to the touch end event but actually trigger the onclick event!
The same buttons that are not inside the canvas do not react to anything...
This is the tutorial code I pasted in my page
<script type="text/javascript">
var can, ctx, canX, canY, mouseIsDown = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
document.body.addEventListener("mouseup", mouseUp, false);
document.body.addEventListener("touchcancel", touchUp, false);
}
function mouseUp() {
mouseIsDown = 0;
mouseXY();
}
function touchUp() {
mouseIsDown = 0;
// no touch to track, so just show state
showPos();
}
function mouseDown() {
mouseIsDown = 1;
mouseXY();
}
function touchDown() {
mouseIsDown = 1;
touchXY();
}
function mouseXY(e) {
if (!e)
var e = event;
canX = e.pageX - can.offsetLeft;
canY = e.pageY - can.offsetTop;
showPos();
}
function touchXY(e) {
if (!e)
var e = event;
e.preventDefault();
canX = e.targetTouches[0].pageX - can.offsetLeft;
canY = e.targetTouches[0].pageY - can.offsetTop;
showPos();
}
function showPos() {
// large, centered, bright green text
ctx.font = "24pt Helvetica";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "rgb(64,255,64)";
var str = canX + ", " + canY;
if (mouseIsDown)
str += " down";
if (!mouseIsDown)
str += " up";
ctx.clearRect(0, 0, can.width, can.height);
// draw text at center, max length to fit on canvas
ctx.fillText(str, can.width / 2, can.height / 2, can.width - 10);
// plot cursor
ctx.fillStyle = "white";
ctx.fillRect(canX - 5, canY - 5, 10, 10);
}
</script>
<canvas id="can" height="200" width="300" style="background-color: black">
</canvas>
I will continue to investigate.
But from what is looks like I will have to put a canvas behind my buttons...
I would prefer to avoid that if possible, but so far I do not see any other solutions.
If that works, I will post it as a solution unless someone wiser than me can propose something better.
Edit 3
I confirm that the javascript is not useful.
Just having the canvas behind the img make them respond to the click event.
I am not sure why this happen, but I will take it until I can find a better solution.
If anyone as an explanation or better solution, you are welcomed to post it.

Answer 1

Ok, finally figured it out.
Looks like the Touch Events do not work properly if you use absolute position for your elements.
I revised my div tables layout using css and now everything is working fine.