Question

当您将鼠标移到画布上时，我希望它显示坐标。

当您更改鼠标位置（不移出画布）时，我希望它显示新的坐标。稍微延迟会很好。

我正在使用工具提示，但firefox中的此代码不起作用：只有当您进入画布然后必须移出并重新进入画布再次显示时，标题才会出现。

我该如何解决？

document.getElementById('mycanvas').addEventListener(
    'mousemove', function(event) {
        mycanvas.title=event.layerX;
    });

Answer 1

您无法控制浏览器选择显示元素标题的方式。它是"usually displayed in a 'tool tip' popup when the mouse is over the displayed node"，但显示的延迟和更新的频率不在您的控制之下。

下面是一个跟踪鼠标位置的示例，并显示您可以完全控制的弹出窗口中的坐标（延迟显示，偏移，样式等）。将鼠标移到画布上，在给定位置等待一秒钟以弹出窗口，移动到其他位置，等待等等。

值得注意的细节：

在每个setTimeout活动中使用mousemove，并clearTimeout清除之前的活动。
使用jQuery“标准化”事件，使用pageX/pageY和$.offset()，将工具提示本身放置在适当的坐标处（考虑窗口滚动），并使其显示相对于画布。（我将画布放在一个具有20px边距的div中以显示）。

_{（我最初想在没有jQuery的情况下这样做，但是关于鼠标事件属性的浏览器怪癖使我放弃了这个想法，经过多次编辑后我决定用jQuery来完成某些工作）}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var background = document.getElementById('background');
if (background.complete) context.drawImage(background, 0, 0);
else background.onload = function() { context.drawImage(background, 0, 0); }
var caption = document.getElementById('caption');
var pos = {};
var timerID;
$(canvas).mousemove(function(e) {
  pos = {
    x: e.pageX - $(this).offset().left,
    y: e.pageY - $(this).offset().top,
    captionX: e.pageX,
    captionY: e.pageY,
  };
  caption.setAttribute('style', 'display:none');
  if (timerID) { clearTimeout(timerID); }
  timerID = setTimeout(showPosition, 500);
});
canvas.addEventListener('mouseleave', function(event) {
  caption.setAttribute('style', 'display:none');
  if (timerID) { clearTimeout(timerID); }
});
function showPosition() {
  caption.setAttribute('style', 'display: inline; left:'+(pos.captionX + 8)+"px; top: "+(pos.captionY + 8)+"px;");
  caption.innerHTML = "(" + pos.x + "," + pos.y + ")";
}

#background {visibility:hidden;}
#caption {
  display: none;
  position:absolute;
  text-align: center;
  margin: 3px;
  width: 120px;
  height: 24px;
  background: black;
  color: white;
}

<div style="margin: 20px">
  <canvas id="canvas" width="480" height="320"></canvas>
</div>
<div id="caption"></div>
<img src="https://i.imgur.com/PWSOy.jpg" id="background" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Firefox只显示一次title属性

1 个答案: