Question

我使用DOM动态创建了一个DIV和其中的一些输入字段。然后我应用了一个函数来移动它：

document.getElementById('thedivtomove').addEventListener("mousedown", function() {
  mydragfunction.startMoving(this, "thedivcontainer", event);
});
document.getElementById('thedivtomove').addEventListener("mouseup", function() {
  mydragfunction.stopMoving("thedivcontainer");
});

当我单击字段（输入，组合等）时，我想禁用它（移动），但是尽管方法多种多样，但我仍无法达到这个目标。

在我看来，最合乎逻辑的方式是反转事件（上下）

    document.getElementById('thefield').addEventListener("mousedown", function() {
      mydragfunction.stopMoving("thedivcontainer");
    });
    document.getElementById('thefield').addEventListener("mouseup", function() {
      mydragfunction.startMoving("theboxtomove", "thedivcontainer", event);
    });

通过将鼠标悬停在字段上来

，但此选择似乎不起作用。我没有报告其他所有尝试，因为我发现它们很怪异（各种事件的组合，标志的引入等）

Answer 1

对于相同类型的事件，click，mousedown，mouseup，首先在相同的上下文或元素上确定执行顺序。

在单个动作启动多个事件的情况下，其顺序是固定的。也就是说，以mousedown→mouseup→click的顺序调用处理程序。事件的处理顺序相同：onmouseup在onclick运行之前完成。

然后，您需要考虑DOM和浏览器提供给您的UI和工具。

一个实现目标的示例，我可以使用输入的焦点状态来禁用事件：

const divToMove = document.getElementById('thedivtomove');
const inputs    = divToMove.querySelectorAll('input');

inputs.addEventListener('focus', removerListener);
inputs.addEventListener('focusout', listenMove);

const listenMove = () => {
  divToMove.addEventListener('mousedown', mydragfunction.startMoving.bind(this, 'thedivcontainer'));
  divToMove.addEventListener('mouseup', mydragfunction.stopMoving.bind(this, 'thedivcontainer'));
}

const removeListener = () => {
  divToMove.removeEventListener('mousedown, mydragfunction.startMoving);
  divToMove.removeEventListener('mouseup', mydragfunction.stopMoving);
}

请注意bind函数，该函数允许您定义要在函数内部使用的上下文。因此，您的mydragfunction.startMoving(this, "thedivcontainer", event);将不会更改签名，但我不会在绑定调用中传递事件对象。这将通过您的浏览器事件的实现自动传递。

如何通过事件启用和禁用功能

1 个答案: