Question

当我没有导航栏时，鼠标点击画布的位置是正确的。但是，当我在页面顶部添加导航栏时，它会移动。这是我的代码：

<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
 </head>
<body ng-controller="myCtrl">
  <table>

<tr ng-repeat="itms in items"><td>{{itms.title}} <input type="text" ng-model="itms.quantity"/>{{itms.price}} - {{itms.totalprice}}</td></tr>


</table>
</body>
</html>

光标位置的Javascript：

    <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>

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

Answer 1

使用鼠标事件属性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;

来自MDN web API scrollY

具有导航栏时，HTML画布上的鼠标位置不正确

1 个答案: