为什么 (MouseUp mouseDown) 在移动浏览器上不起作用？答案

【问题标题】：Why (MouseUp mouseDown) are not working on mobile browser?为什么 (MouseUp mouseDown) 在移动浏览器上不起作用？
【发布时间】：2016-11-28 07:16:53
【问题描述】：

我的代码采用鼠标位置。手机浏览器支持html5。但不能使用 MouseUp mouseDown 我该如何解决？

<!DOCTYPE HTML>
<html>

<head>

  <body style="background-color:3F6E6F;">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
</head>

<body>

  <canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas>
  <p id="demo"></p>


  <script>
    var depx = 0;
    var depy = 0;
    var flag = 0;

    function writeMessage(canvas, message) {
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.font = '18pt Calibri';
      context.fillStyle = 'black';
      context.fillText(message, 10, 25);
    }


    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
      };
    }


    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');


    function mouseDown() {
      canvas.addEventListener("mousemove", myFunction);
    }




    function myFunction(evt) {
      var mousePos = getMousePos(canvas, evt);
      if (flag == 0) {
        depx = mousePos.x;
        depy = mousePos.y;
      }
      flag = 1;


      var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ' abs position ' + (mousePos.x - depx) + ',' + (mousePos.y - depy);
      writeMessage(canvas, message);
    }

    function mouseUp() {
      flag = 0;
      canvas.removeEventListener("mousemove", myFunction);
    }
  </script>

</body>

</html>

这是 Html 和 Css 代码，如果您发现有帮助，请查看并帮助我进行一些更改。

【问题讨论】：

this 是您应该使用的移动设备。

标签： javascript html mobile browser

【解决方案1】：

因为触摸事件不是鼠标事件。如果添加鼠标，则可以获得鼠标事件。

对于触摸事件，需要使用

pointerup
pointerdown

事件/事件监听器。阅读有关pointerup 和pointerdown 的更多信息。

用法：也为指针添加addEventListener。

document.getElementById('elem1').addEventListener('pointerdown', methodForPointerDown, false);
document.getElementById('elem1').addEventListener('pointerup', methodForPointerUp, false);

【讨论】：

【解决方案2】：

对于不使用鼠标的移动浏览器，MouseUp 和 mouseDown 有另一种选择。

对于移动浏览器，您可以使用 touchstart 和 touchend 代替它们。

There is a link here for reference

这是另一组用于移动设备的事件监听器。

Pointer Events

这是一个如何使用指针事件侦听器检测指针设备类型的示例

检测用户输入的类型

window.addEventListener("pointerdown", detectInputType, false);

function detectInputType(event) {
    switch(event.pointerType) {
        case "mouse":
            /* mouse input detected */
            break;
        case "pen":
            /* pen/stylus input detected */
            break;
        case "touch":
            /* touch input detected */
            break;
        default:
            /* pointerType is empty (could not be detected)
            or UA-specific custom type */
    }
}

希望对你有所帮助..

【讨论】：

只需参考指针事件链接..它显示了如何检测指针设备然后相应地进行......