将触摸事件添加到html img控件

我正在尝试将触摸事件添加到html5页面上的img控件中。

这是我到目前为止所拥有的：

<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" />

来自普通Web浏览器的click事件正常运行。但是，当我尝试从ipad访问它时，它没有反应。

帮助将非常受欢迎。

编辑1

到目前为止仍然没有运气。我试图用div包围img并将touchend事件添加到div中，但是它也没有响应。

编辑2

我遵循了适用于ipad的教程。基本上，本教程是一个画布，它显示画布内触摸事件的坐标。我只是将画布和javascript添加到我的页面中，并使其与某些img按钮重叠。我的页面对触摸事件做出反应，并且画布正确显示了坐标。现在，这变得越来越奇怪了。现在，显示在画布内的按钮会对触摸结束事件做出反应，但实际上会触发onclick事件！不在画布内的相同按钮不会对任何东西产生反应...

这是我粘贴在页面中的教程代码

<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>

我将继续调查。但是从外观上看，我将不得不在按钮后面放置一个画布……如果可能的话，我宁愿避免这种情况，但是到目前为止，我还没有看到任何其他解决方案。如果这样可行，除非有比我聪明的人可以提出更好的建议，否则我将其作为解决方案。

编辑3

我确认javascript没有用。只需将画布放在img后面，即可使它们响应click事件。我不确定为什么会发生这种情况，但是我会一直坚持下去，直到找到更好的解决方案。如果有人作为解释或更好的解决方案，欢迎您发布。