如何停止懸停的jQuery函數並在鼠標離開時啓動

Question

我有一個運行於mousemove事件的jQuery函數。實際上，我必須將圖像分爲主圖像和陰影圖像。我正在使用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」標記了你的問題。我刪除標籤，因爲它是誤導;）