时间戳

首页 > 解决方案 > 需要 addEventListener() 冒泡修复

javascript - 需要 addEventListener() 冒泡修复

问题描述

我正在测试我的函数计数鼠标位置，其中addEventListener包括两个 s。出了点问题，每次移动鼠标时我都会收到一条警报消息，而它必须只能通过单击，因为另一个侦听器只能帮助计算坐标。我试过e.stopPropagation()了，但没有用。有谁知道我该如何解决它

function changeCode(e) {
  document.addEventListener('click', alert('message'), false )
  
}
let posGet = document.addEventListener('mousemove', function(e) {
  let mousecoords = getMousePos(e);
  
  if (mousecoords.x > -400) {
    
    changeCode(e)
    
  }
}, false );

function getMousePos(e) {
  return { x: e.clientX, y: e.clientY };
}

标签： javascriptdom-events

解决方案

首先，当您向事件监听器添加指令并添加'（）'时，JS会立即执行它，这就是为什么它会在鼠标移动时发出警报。

所以一个解决方案可以是给它一个匿名函数，比如：

document.addEventListener('click', function(){alert('message')}, false )

这会将函数作为事件的回调函数，并且仅在事件触发时执行。

但是您的代码还有另一个问题：每次鼠标移动并且 x > -400 时，它都会添加事件侦听器。这将每次重复该指令，并且每次鼠标移动时您都会被 alert() x 卡住。

为了缓解这种情况，您只需将事件侦听器添加到函数之外。

或者，在我的示例中，事件侦听器绑定到特定函数，这使您能够删除它，从而避免重复事件侦听器。

function changeCode(e) {
  document.removeEventListener('click', mouseClickHandler, false );
  document.addEventListener('click', mouseClickHandler, false );

  
}
function mouseClickHandler(){
    alert('message');
}

let posGet = document.addEventListener('mousemove', function(e) {
  let mousecoords = getMousePos(e);
  
  if (mousecoords.x > -400) {
    
    changeCode(e)
    
  }
}, false );

function getMousePos(e) {
  return { x: e.clientX, y: e.clientY };
}

推荐阅读