javascript - 如何在悬停时停止 jQuery 函数并在鼠标离开时启动

Question

我有一个在 mousemove 事件上运行的 jQuery 函数。实际上，我必须将图像分开，一个是主图像，一个是阴影图像。我正在使用 mousemove 事件来反射(reflect)阴影图像。一切正常，但我想在将鼠标悬停在主图像上时停止 mousemove 事件。当我从图像中释放鼠标时，它将再次运行。我怎样才能得到那个。这是链接 - http://zakirinfo.com/mouse/

HTML

<div style="width:100%">
<img id="shadow-img" style="position:absolute;"src="./assets/img/slsshadow.jpg"></img>
<img id="center-img" style="position:absolute;left:50%;top:50%;margin-left:-204px;margin-top:-204px" src="./assets/img/slslogo.jpg"></img>
</div>

jQuery

(function() {
    var shadowImg = document.getElementById('shadow-img');
    var centerImg = document.getElementById('center-img');
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
        var center = {
            x : centerImg.getBoundingClientRect().left + 204,
            y : centerImg.getBoundingClientRect().top
        };
        console.log(center);
        var shadowPos = {
            x : (1.8 * center.x) - event.pageX,
            y : (2.2 * center.y) - event.pageY,
        };

        shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
    };
})();

Answer 1

这是工作代码(如果我理解正确的话):

(function() {
    var shadowImg = document.getElementById('shadow-img');
    var centerImg = document.getElementById('center-img');
    document.addEventListener("mousemove", handleMouseMove);
    centerImg.addEventListener("mouseenter", function() {
        document.removeEventListener("mousemove", handleMouseMove);
    });
    centerImg.addEventListener("mouseleave", function() {
        document.addEventListener("mousemove", handleMouseMove);
    });
    function handleMouseMove(event) {
        var center = {
            x : centerImg.getBoundingClientRect().left + 204,
            y : centerImg.getBoundingClientRect().top
        };
        console.log(center);
        var shadowPos = {
            x : (1.8 * center.x) - event.pageX,
            y : (2.2 * center.y) - event.pageY,
        };

        shadowImg.style.transform = 'translate(' + shadowPos.x + 'px,' + shadowPos.y +'px)';
    };
})();

HTML 没有变化。这里还有一个 jsfiddle:http://jsfiddle.net/wbkdrdpk/2/

解释:

首先，我使用 addEventListener 来分配事件。

document.addEventListener("mousemove", handleMouseMove);

这与您的行几乎相同，但它的优点是您可以调用 removeEventListener 函数来删除处理程序

现在我向图像添加两个事件监听器以删除并重新添加移动处理程序:

centerImg.addEventListener("mouseenter", function() {
     document.removeEventListener("mousemove", handleMouseMove);
});
centerImg.addEventListener("mouseleave", function() {
     document.addEventListener("mousemove", handleMouseMove);
});

非常简单的东西。

编辑:我删除了所有 jquery 代码，因为即使您用“jquery”标记了您的问题，您实际上并没有使用 jquery。我也删除了标签，因为它具有误导性；)