如何为querySelectorAll选中元素绑定仅自身触发的onmousemove事件

嘿，我明白你的困扰啦！你遇到的问题核心在于document.querySelectorAll返回的是一个NodeList集合（类似数组的元素列表），不是单个DOM元素，所以直接给menuSingle绑定onmousemove是不会生效的——你得逐个遍历集合里的元素，给每个元素单独绑定事件才行。

另外，你的代码里用document.querySelector('.navigation__single-text')只会拿到页面中第一个匹配的元素，如果每个.navigation__single里都有对应的text元素，你得在当前元素的上下文里去查找，不然所有元素都会操作同一个text元素。

下面是修正后的完整方案：

方案1：遍历每个元素绑定事件（静态元素适用） #

// 获取所有导航元素
let menuSingle = document.querySelectorAll('.navigation__single');

// 逐个遍历，给每个元素绑定mousemove事件
menuSingle.forEach(item => {
  item.onmousemove = function(e) {
    // 从当前触发事件的元素里，找到对应的text子元素
    const menuSingleText = this.querySelector('.navigation__single-text');
    // 把事件对象和当前的text元素传给你的视差函数
    callParallax(e, menuSingleText);
  };
});

// 你的视差函数可以接收事件和目标元素，针对性处理
function callParallax(e, targetText) {
  // 举个视差逻辑的例子：计算鼠标在当前元素内的相对位置
  const elementRect = e.currentTarget.getBoundingClientRect();
  const relativeX = e.clientX - elementRect.left;
  const relativeY = e.clientY - elementRect.top;
  
  // 根据相对位置调整text元素的位置
  targetText.style.transform = `translate(${relativeX * 0.1}px, ${relativeY * 0.1}px)`;
}

关键要点： #

• forEach遍历：NodeList自带forEach方法，能轻松遍历每个元素（如果要兼容IE等老浏览器，用for循环替代即可）
• this关键字：在事件处理函数里，this指向当前触发事件的元素，用this.querySelector就能精准拿到当前元素内的子元素，避免全局查找的问题
• e.currentTarget：如果担心this的指向问题，也可以用e.currentTarget，它始终指向绑定事件的元素，逻辑更清晰

方案2：事件委托（动态添加元素适用） #

如果后续页面会动态添加.navigation__single元素，上面的方法就没法覆盖新元素了，这时候用事件委托更合适——把事件绑定到父元素上，利用事件冒泡来处理：

// 找到导航元素的父容器（根据你的DOM结构调整选择器）
const navigationContainer = document.querySelector('.navigation');

// 给父容器绑定mousemove事件
navigationContainer.addEventListener('mousemove', function(e) {
  // 找到触发事件的那个.navigation__single元素
  const activeItem = e.target.closest('.navigation__single');
  
  // 如果确实是在目标元素上移动，才执行逻辑
  if (activeItem) {
    const menuSingleText = activeItem.querySelector('.navigation__single-text');
    callParallax(e, menuSingleText);
  }
});

这样不管是静态还是动态添加的元素，只要鼠标在它上面移动，都会独立触发对应的视差逻辑啦！

内容的提问来源于stack exchange，提问作者riogrande