javascript - Firefox 仅显示一次标题属性

Question

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

当您更改鼠标位置(不移出 Canvas )时，我希望它显示新坐标。稍微延迟一下就好了。

我正在使用工具提示，但此代码在 Firefox 中不起作用:标题仅在您进入 Canvas 时出现，然后您必须移出并重新进入 Canvas 才能再次显示它。

如何解决？

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" ，但出现的延迟以及更新的频率不受您控制。

下面是一个跟踪鼠标位置并在弹出窗口中显示坐标的示例，您可以完全控制该弹出窗口(出现延迟、偏移、样式等)。将鼠标移到 Canvas 上，在给定位置等待一秒钟，让弹出窗口出现，移动到其他地方，等待，等等。

值得注意的细节:

• 在每个 mousemove 事件中使用 setTimeout，并使用 clearTimeout 清除前一个事件。
• 使用 jQuery“规范化”事件，使用 pageX/pageY 和 $.offset()，将工具提示本身放置在适当的坐标处(考虑到窗口)滚动)，并使其显示相对于 Canvas 的坐标。 (我将 Canvas 放置在具有 20 像素边距的 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>