代码之家 › 专栏 › 技术社区 › fabio

Firefox仅显示一次标题属性

firefox javascript

fabio · 技术社区 · 8 年前

当你改变鼠标位置(不移出画布)时,我希望它显示新的坐标。稍微耽搁一下就好了。

我使用的是工具提示,但firefox中的这段代码不起作用:只有当你进入画布时,标题才会出现,然后你必须移出并重新进入画布才能再次显示它。

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

1 回复 | 直到 8 年前

Hugues M. 8 年前

您无法控制浏览器选择显示元素标题的方式。它是 " usually displayed in a 'tool tip' popup when the mouse is over the displayed node " ,但延迟出现以及更新频率不在您的控制范围内。

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

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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前