Question

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

问题是当启用绘图并且我想再次按下按钮以禁用它时我在按钮后面绘制，这是因为我使用＆＃34; onDocumentMouseDown＆＃34;来开始我的绘图。功能

按下按钮时也会调用此功能。有没有办法控制或解决这个问题？

＆＃13;

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

＆＃13;

In＆＃34; toggleDrawing＆＃34;我将bool更改为false或true。但就像我说的那样，按下此按钮也会导致我的程序被绘制。

＆＃13;

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

＆＃13;

那么如何在不执行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);

或只使用箭头功能。

{{1}}

单击按钮时阻止onDocumentMouseDown？

1 个答案: