javascript - 将EventListener添加到当前目标

Question

我正在尝试向网格元素内的背景图像添加一些鼠标移动 -

这是我的 HTML，它重复了多次:

<div class="pure-u-1-3 grid-item" >
                            <div class="bg-img" style="background:url('images/blog/network.png'"></div>
                            <div class="blogInner" >
                                <p>SOME TEXT</p>
                                <a href="" class="lnk-a">Read More</a>
                            </div>

                        </div>

以下代码有效 - 但移动所有元素 -

const bg = document.querySelector('.bg-img');
const bgIn = document.querySelector('.blogInner');
const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;

bgIn.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX / windowWidth;
  const mouseY = e.clientY / windowHeight;

  bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});

我尝试使上面的代码仅在悬停的项目上运行，如下 -

 $('.grid-item').mouseover(function(event) {

const thisitem = $(event.currentTarget);
const bg = $(event.currentTarget).find('.bg-img');
const bgIn = $(event.currentTarget).find('.blogInner');


const windowWidth = window.innerWidth / 5;
const windowHeight = window.innerHeight / 5 ;

bgIn.addEventListener('mousemove', (e) => {
  const mouseX = e.clientX / windowWidth;
  const mouseY = e.clientY / windowHeight;

  bg.style.transform = `translate3d(-${mouseX}%, -${mouseY}%, 0)`;
});

});

悬停时出现错误:bgIn.removeEventListener 不是函数我完全被难住了 - 因为相同的代码驱逐了悬停功能工作正常 - 任何人都可以帮助我理解出了什么问题吗？

Answer 1

如果你只使用 jquery 事件，它应该可以工作，而不是将原生 js 与 jquery 混合。

bgIn.mousemove((e) => {
  const mouseX = e.clientX / windowWidth;
  const mouseY = e.clientY / windowHeight;

  bg.css({transform: `translate3d(-${mouseX}%, -${mouseY}%, 0)`});
});