Question

我想＆＃34;听＆＃34;仅在单击复选框时才显示鼠标事件。因此，我有以下代码：

HTML

<input type="checkbox" id="magicLens" onchange="magicLens()">
<label for="magicLens">Magic Lens</label>

JS

function magicLens(){
  const magicLens_checked = document.getElementById('magicLens').checked;

  if (magicLens_checked === true){
      canvas.addEventListener('mousemove', e => {
         myAnonymous = arguments.callee;
         ...
         // draw something at the current mouse position
         // and therefore use the 'e' event object
    });
  }
  else {
      canvas.removeEventListener('mousemove', myAnonymous);
  }
}

问题是，未选中复选框时（false）也会出现绘图（镜头）。我甚至不确定removeEventListener()是否是处理它的正确方法（虽然我已经尝试了没有它的整个事情，结果是相同的）。

也许你有更好的想法来描述标题中的问题。随意编辑！

Answer 1

实际上总是更容易听取事件并在那里检查是否选中了复选框。

const canvas = document.getElementById('canvas');

canvas.addEventListener('mousemove', e => {
    const magicLens_checked = document.getElementById('magicLens').checked;

    if (!magicLens_checked) {
        return;
    }

    // Do something with e
    console.log(e);
});

您可以在此Fiddle中查看。（我将事件监听器添加到文档中，以避免创建任意画布，但它的工作方式相同）

Answer 2

Javascript引擎将传递给addEventListener和removeEventListener的内容视为两个不同的函数，这就是removeEventListener无法正常工作的原因。在这些之外创建一个命名函数并将其传递给它们。

在有条件的情况下收听鼠标事件

2 个答案: