单击按钮时阻止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

有点难以理解，但我想你不想触发在mousedown上点击时在document上注册的button事件。

如果是这样，请在停止传播该事件的按钮上注册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);