Question

我正在尝试将触摸事件添加到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" />

来自普通网络浏览器的点击事件正常运行。但是当我尝试从我的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事件。我不确定为什么会这样，但我会接受它，直到找到更好的解决方案。如果有人作为解释或更好的解决方案，欢迎您发布。

Answer 1

好的，终于明白了。如果您对元素使用绝对位置，则看起来Touch事件无法正常工作。我使用css修改了我的div表格布局，现在一切正常。

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

1 个答案: