JavaScript函数仅用于一个div而不是整个文档

Question

对于一个Box2D组合，我需要这段代码来避免无意中的点击：

null

(() => {
  let lock = 0;
  const prevent = e => {
    if (lock !== 2)
      return;
    e.preventDefault();
    e.stopPropagation();
  };
  const unlock = e => {
    prevent(e);
    setTimeout(() => lock = 0);
  };
  addEventListener('click', prevent, true);
  addEventListener('pointerdown', e => lock = 1, true);
  addEventListener('pointermove', e => lock && (lock = 2), true);
  addEventListener('pointerup', unlock, true);
  addEventListener('pointercancel', unlock, true);
})();

#physics {
  width: 300px;
  height: 300px;
  background-color: blue;
}

html lang-html prettyprint-override"><div id="physics"></div>

null

目前，它适用于整个文档。但我希望它仅适用于

。

怎么可能编码呢？

会非常感谢你的帮助！

Answer 1

试试看

document.getElementById('physics').addEventListener('click', ...);

Answer 2

您需要首先选择div,然后将处理程序添加到该div：

let div = document.getElementById('physics');
div.addEventListener('click', prevent, true);
div.addEventListener('pointerdown', e => lock = 1, true);
div.addEventListener('pointermove', e => lock && (lock = 2), true);
div.addEventListener('pointerup', unlock, true);
div.addEventListener('pointercancel', unlock, true);