鼠标在 canvas 上无法移动？

Question

我的 angular 组件中有一个 canvas 元素。 主要功能之一是在 canvas 上单击并拖动选择 window。

我正在跟踪一些鼠标位置：

• handleMouseMove()跟踪 canvas 上的移动，这是我在组件中实际使用的。
• wrapper的mousemove处理程序（在模板中内联）跟踪鼠标在整个组件中的移动，只是为了查看鼠标正在被识别。
• 在我的ngOnInit()中，我还将一个侦听器附加到window以跟踪screenLocation 。

有时我在 canvas 上单击并拖动鼠标指针变为not-allowed ，我不知道为什么。 我知道当它在这个 state 中时，所有鼠标跟踪都会停止。 如果我正在拖动一个选择，然后让鼠标的 go 使指针恢复正常，但是mouseup没有注册，这会打乱我的选择。

关于为什么会发生这种情况的任何线索？

我在这里包含了模板。

<div
    #wrapper
  id="wrapper"
  [style.cursor]="this.startOfPan ? 'grabbing' : isInPanningMode ? 'grab' : 'default'"
  (mousemove)="canvasLocation = [$event.clientX, $event.clientY]"
>
  <canvas
      #outerCanvas id="outer-canvas"
  ></canvas>
  <div
    id="graph-wrapper"
    [ngStyle]="{
        'top.px': graphDrawer.config.lastValueYMargin,
        'left.px': graphDrawer.origin[0]
      }"
  >
    <div id="chart-title">{{chart.title}} - {{shortGuid}}</div>

    <canvas
        #innerCanvas id="inner-canvas"
      (mousemove)="handleMouseMove($event, Regions.graph)"
      (mousedown)="handleMouseDown()"
      (mousewheel)="handleMouseWheel($event)"
      [ngStyle]="{
        'border-left-width.px': !config.drawAxes ? 0 : !chart.yAxisRight ? config.axisWidth : 0,
        'border-right-width.px': !config.drawAxes ? 0 : chart.yAxisRight ? config.axisWidth : 0,
        'border-bottom-width.px': !config.drawAxes ? 0 : chart.xAxisTop ? 0 : config.axisWidth,
        'border-top-width.px': !config.drawAxes ? 0 : !chart.xAxisTop ? 0 : config.axisWidth
      }"
    ></canvas>
    <div
      id="selection" *ngIf="!!selection"
      [ngStyle]="{
      'top.px': selectionRect.y,
      'left.px': selectionRect.x,
      'height.px': selectionRect.height,
      'width.px': selectionRect.width
      }"
    ></div>
  </div>
  <div
    id="x-axis-hover" class="axis-hover"
    (mousemove)="handleMouseMove($event, Regions.xGutter)"
    (mouseleave)="didLeaveGutter()"
    (mousedown)="handleMouseDown()"
    (mousewheel)="handleMouseWheel($event)"
    [ngStyle]="{
      'top.px': graphDrawer.graphHeight,
      'left.px': !chart.yAxisRight ? graphDrawer.yAxisGutterWidth : graphDrawer.config.lastValueXMargin,
      'height.px': graphDrawer.xAxisGutterHeight,
      'width.px': config.drawAxes ? graphDrawer.graphWidth : graphDrawer.plottableWidth + 1,
      'backgroundColor': mouseLocation.region === 'xGutter' ? 'rgb(105,105,105,0.3)' : 'transparent'
    }"
  ></div>
  <div
    id="y-axis-hover" class="axis-hover"
    (mousemove)="handleMouseMove($event, Regions.yGutter)"
    (mouseout)="didLeaveGutter()"
    (mousedown)="handleMouseDown()"
    (mousewheel)="handleMouseWheel($event)"

    [ngStyle]="{
      'top.px': config.drawAxes ? 0 : graphDrawer.config.lastValueYMargin - 1,
      'left.px': !chart.yAxisRight ? 0 : graphDrawer.plottableWidth + graphDrawer.config.lastValueXMargin,
      'height.px': config.drawAxes ? graphDrawer.graphHeight + config.axisWidth : graphDrawer.plottableHeight + 2,
      'width.px': graphDrawer.yAxisGutterWidth,
      'backgroundColor': mouseLocation.region === 'yGutter' ? 'rgb(105,105,105,0.3)' : 'transparent'
    }"
  ></div>
</div>

Answer 1

我的疯狂猜测是，您的任何鼠标事件处理程序中是否有preventDefault() ？