Question

当我将其发送到node.js服务器时，为什么在下面的脚本中为“ evt.clientX”和“ evt.clientY”得到“未定义”：

<script>
socket.on('message', function(message) {
      
		})
		
		$('#myCanvas').on("pointermove", function(evt) {
			socket.emit('message', ("X: " + evt.clientX + " " + "Y: " + evt.clientY + " on a "+ evt.target.nodeName));
		})
		
</script>

但是，当我使用相同的脚本但将“ .on”更改为“ .click”时，它将在我的node.js服务器中正确打印出X和Y的坐标。下面是套接字消息引用的其余代码：

<script>
      function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width / 2, canvas.height / 2);
    context.font = '10pt 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');

 canvas.addEventListener('pointermove', function(evt) {
    var x = evt.clientX;
    var y = evt.clientY;
    var mousePos = getMousePos(canvas, evt);
    var message = 'X: ' + mousePos.x + ' Y: ' + mousePos.y;
    writeMessage(canvas, message);
  }, false);

我认为这与我对jquery的使用有关吗？但是我很可能是完全错误的。任何帮助表示感谢！但是，求求您。尽可能使说明简单。我有点新手！

非常感谢，

Answer 1

我实际上解决了这个问题。evt.clientX和evt.clientY需要更改为evt.pageX和evt.pageY，然后我必须更改套接字消息中的输出。根据我的理解，奇怪的是，pointermove应该适用于clientX和clientY。

为什么当我使用“ .on”时我变得不确定，而当我使用“ .click”时却得到一个值

1 个答案: