javascript - 单击按钮时防止 onDocumentMouseDown？

Question

我制作了一个用户可以绘图的小应用程序。 他可以通过按下相应的按钮来切换绘图。

问题是当启用绘图时我想再次按下按钮以禁用它我在按钮后面绘图，这是因为我使用“onDocumentMouseDown”函数开始绘图。

当我按下按钮时，这个函数也会被调用。 有没有办法控制或解决这个问题？

var button = document.getElementById( 'draw' );
button.addEventListener( 'touchstart', function ( event ) {this.toggleDrawing();}.bind(this), false );
button.addEventListener( 'click', function ( event ) {this.toggleDrawing();}.bind(this), false );

在“toggleDrawing”中，我将绘图的 bool 值更改为 false 或 true。 但正如我所说，按下此按钮也会使我的程序进行绘制。

onDocumentMouseDown(event)
{
  switch(event.button)
  {
    case 0:
      if(this.canDraw)
      {
        this.startPos = new THREE.Vector3(event.clientX, event.clientY,0);
        this.endPos = new THREE.Vector3(event.clientX, event.clientY,0);
        this.startLine();
      }
    break;
    default:
    break;
  }
}

那么如何在不执行onDocumentMouseDown的情况下点击一个按钮并调用该按钮的函数呢？

Answer 1

有点难以理解，但我认为当您在 button< 中单击时，您不想触发在 document 上注册的 mousedown 事件.

如果是这样，请在停止传播该事件的按钮上注册一个 mousedown 处理程序。

button.addEventListener('mousedown', function(event) { 
  event.stopPropagation() 
}, false);

否则，如果 event.target 是 draw 按钮，您可以提前退出绘图功能。

onDocumentMouseDown(event)
{
  if (event.target.id === "draw")
    return;

  // your code
}

---

不相关的旁注，而不是 .bind() 在匿名函数上，您可以在方法本身上调用它，假设它不介意接收 event对象。

button.addEventListener('click', this.toggleDrawing.bind(this), false);

或者只使用箭头函数。

button.addEventListener('click', () => this.toggleDrawing(), false);