Firefox仅显示一次标题属性

Question

When you move the mouse over a canvas I want it to show the coordinates.

When you change the mouse position (without move out of the canvas) I want it to show the new coordinates. A little delay would be nice.

I'm using a tooltip but this code in firefox doesn't work: the title appears only when you enter the canvas and then you have to move out and re-entering the canvas to show it again.

How can I solve?

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

Answer 1

You can't control how the browser chooses to display an element's title. It's " usually displayed in a 'tool tip' popup when the mouse is over the displayed node " , but the delay to appear and how often it is updated is not under your control.

Below is an example that tracks mouse position and shows coordinates in a popup that you have total control over (delay to appear, offsets, style etc). Move your mouse over the canvas, wait a second on a given position to let the popup appear, move elsewhere, wait, etc.

Noteworthy details:

• Uses setTimeout at each mousemove event, and clearTimeout to clear previous one.
• Uses jQuery to "normalize" the event, using pageX/pageY and $.offset() , to place the tooltip itself at appropriate coordinates (taking into account window scrolling), and make it show coordinates that are relative to the canvas. (I placed the canvas within a div that has a 20px margin to show that).

_{(I initially wanted to do it without jQuery, but browser quirks about mouse event properties made me abandon that idea, and after multiple edits I settled with jQuery to get something working)}

 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>