Question

我想记录用户单击任意位置后鼠标遇到的所有event.target，并在他释放单击后停止记录。到目前为止，我已经提出了这个解决方案，在鼠标悬停后它不会停止录制，我也不知道为什么。

document.addEventListener('click', function() {
  document.addEventListener('mouseover', record);
  document.addEventListener('mouseup', removeListener);
})

function record(e) {
  console.log(e.target);
}

function removeListener() {
  document.removeEventListener('mouseover', record);
  document.removeEventListener('mouseup', removeListener);
}

<div class='toto'>Toto</div>
<div class='toto'>Toto</div>
<div class='toto'>Toto</div>
<div class='toto'>Toto</div>

编辑：答案和解释

addEventListener('click')在mouseup上触发，因此顺序如下：

document.addEventListener('click', function() {
    //Following would start once mouseup
    document.addEventListener('mouseover', record);
    //Following never triggers cause mouse is already up
    document.addEventListener('mouseup', removeListener);
})

the answer中所述的解决方案是将'click'替换为'mousedown'。按下鼠标但未释放时立即触发：

document.addEventListener('mousedown', function() {
  document.addEventListener('mouseover', record);
  document.addEventListener('mouseup', removeListener);
})

Answer 1

应该使用mousedown来代替click事件

我分叉了您的代码笔，您可以看到结果：https://codepen.io/Lazzaro83/pen/EeoxEW

document.addEventListener('mousedown', function() {
  document.addEventListener('mouseover', record);
document.addEventListener('mouseup', removeListener);
})

Answer 2

您的问题是因为您将一个侦听器放到另一个侦听器中，所以这样做不是可靠的方法，因为执行的ms条款请记住，JS不是“顺序”的，不必担心，让三个侦听器存活，做某事的一种更好的方法是制作一个像开关一样工作的全局变量：

  let switch = false;

   document.addEventListener('click', function(e) {
   e.stopPropagation(); 
   switch = true;
   }); 
   document.addEventListener('mouseover', function(e){
   e.stopPropagation();
    if (switch){
    console.log(e.target);
    }
   });
   document.addEventListener('mouseup', function(e){
   e.stopPropagation();
   switch = false;
   }) ;

这是我用黑板做的一个项目，有很多降级技巧：

https://codepen.io/LeonAGA/pen/eyWpMV

致谢！

用户单击时从鼠标悬停捕获所有事件目标，然后停止

2 个答案: