Javascript 使用导航栏时，HTML画布上的鼠标位置不正确

当我没有导航栏时，鼠标单击画布的位置是正确的。然而，当我在页面顶部添加导航栏时，它发生了变化。 这是我的密码：

    <div class="container-fluid">

      <div class="row" style="display:none">
        <div class="col-md-12">
          <nav class="navbar navbar-default" role="navigation" style="margin-bottom:0px; margin-top:5px;">...</nav>
      </div></div></div>

      <div class="row">
         <div class="col-md-6" style="background-color: #d6d9dc; height:700px;">
         <div id="myimg" name="myimg"></div>
             <div id="canvasContainer" style="height:600px;">
             <canvas id="canvas" style="position: absolute; background-color:#ecf0f1"></canvas>
             </div>
         </div>
      </div>
   </div>

---

非常感谢您的任何建议。谢谢。

使用鼠标事件属性

pageX

，

pageY

它们为您提供鼠标相对于页面左上角的位置。然后使用

event.target.getBoundingClientRect

获取鼠标事件所在元素的位置。然后，您需要删除页面可能存在的滚动偏移量

在此阶段，鼠标位置位于元素的左上角。还有一个问题，那就是元素的边框宽度。如果边框宽度以像素为单位，则从

mouse.x

、

mouse.y

pos中减去该宽度，如果边框使用不同的度量，或者上边框和左边框的大小不同，则必须进行适当的调整

var mouse = {x : 0, y : 0, events : "mousemove,mousedown,mouseup"};
function mouseEvent(e) {
    var bounds = e.target.getBoundingClientRect();
    mouse.x = e.pageX - bounds.left - scrollX;  // is window.scrollX same for Y
    mouse.y = e.pageY - bounds.top - scrollY;   // 
}

mouse.events    // chaining functions
    .split(",")
    .forEach((eName) => {
        canvas.addEventListener(eName,mouseEvent)
    });

对于较旧的浏览器，您需要通过获取滚动位置

// add this to the mouse event listeners.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var currentScrollX = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var currentScrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

---

从

检查所有css导航栏您是否也可以发布用于查看光标位置的代码please@jetpackpony，谢谢你的注释-我为鼠标光标添加了js代码。我会尽量澄清我的问题。对给您带来的不便表示歉意。：）对不起，到目前为止我无法重现任何问题。它可能与css有关。我已经创建了一个Pen（），请尝试在那里重现问题，这样我们就可以有一个单独的代码样本。请注意，您的代码中有一个额外的结束div标记：

，其中一个是不需要的。这对我很有用。唯一的问题是我无法滚动窗口，因为画布上的鼠标位置也发生了移动。如果你知道如何解决这个问题，那就太好了，但如果你不知道，那就好了。非常感谢：）@matchifang抱歉我不明白鼠标“也移动了”是什么意思？嗯？evt.clientY===evt.pageY-（滚动| | pageYOffset）不客气；-）但是我的意思是，IE不支持

scrollY

（顺便说一句，IE9支持pageYOffset，就像canvas API一样，因此不需要@Kaido，我已经习惯了使用pageX、pageY和侦听文档鼠标事件来处理全局鼠标对象。它让你离开浏览器选项卡和窗口，仍然可以让鼠标向上移动，如果鼠标仍然向下移动，就可以转动鼠标，而正常的DOM元素将我不知道。当我使用clientX时，clientY在左边有一个1像素宽的死区，页面在那里会转到Win10任务栏，返回0,0，这非常烦人。（仅在FF上）。

// add this to the mouse event listeners.
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var currentScrollX = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var currentScrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;