鼠標在 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() ？