鼠標懸停 - 我如何觸發多次？

Question

我試圖做一個horisontal圖像滑塊

當我做了鼠標懸停只會做.scrollLeft /一旦觸發功能和移動圖像1px的預計，但我怎麼讓它只要運行的鼠標在鼠標懸停事件上？

樣品點here

回答樣本here

HTML

<div class="flex"> 
     <div id="slideLeft" class="center-c slideLeft"><div class="left"></div></div> 
     <div id="slideRight" clasS="center-c slideRight"><div class="right"></div></div> 
     <div id="imagesWrapper" class="imagesWrapper flex"> 
      <img src="img/1.jpg"> 
      <img src="img/2.jpg"> 
      <img src="img/3.jpg"> 
      <img src="img/4.jpg"> 
      <img src="img/5.jpg"> 
      <img src="img/6.jpg"> 
      <img src="img/7.jpg"> 
      <img src="img/8.jpg"> 
      <img src="img/9.jpg"> 
      <img src="img/10.jpg"> 
      <img src="img/11.jpg"> 
      <img src="img/12.jpg"> 
      <img src="img/13.jpg"> 
     </div> 
    </div> 

的Javascript

   //IMAGE SCROLL 
       var slideLeft = document.getElementById('slideLeft'); 
       var slideRight = document.getElementById('slideRight'); 
       var imagesWrapper = document.getElementById('imagesWrapper'); 

        slideLeft.addEventListener('mouseover', profileMouseOverLeft, false); 
        slideRight.addEventListener('mouseover', profileMouseOverRight, false); 


       function profileMouseOverLeft() { 
        imagesWrapper.scrollLeft += -1; 
//    profileMouseOverLeft(); 
       } 
       function profileMouseOverRight() { 
        imagesWrapper.scrollLeft += 1; 
//    profileMouseOverRight(); 
       } 

如果我調用的函數內部它只是直奔終點immidietely

如果我改變功能，這一點，他們只是永遠運行下去......

  function profileMouseOverLeft() { 
//    alert("Hi"); 
       imagesWrapper.scrollLeft += -1; 
//    profileMouseOverLeft(); 
       setInterval(function(){ 
        alert("Hello"); 
        profileMouseOverLeft(); 
       }, 100); 
      } 
      function profileMouseOverRight() { 
//    alert("Hello"); 
       imagesWrapper.scrollLeft += 1; 
       setInterval(function(){ 
        profileMouseOverRight(); 
       }, 100); 
//    profileMouseOverRight(); 
      } 

編輯最後JS看起來像這樣和工作得很好

  //IMAGE SCROLL 
      var slideLeft = document.getElementById('slideLeft'); 
      var slideRight = document.getElementById('slideRight'); 
      var imagesWrapper = document.getElementById('imagesWrapper'); 
      var profileRightInterval; 
      var profileLeftInterval; 

      slideLeft.addEventListener('mouseover', profileMouseOverLeft, false); 
      slideRight.addEventListener('mouseover', profileMouseOverRight, false); 


      function profileMouseOverLeft() {     
       profileLeftInterval = setInterval(function() { 
        profileMoveLeft(); 
       }, 25); 
      } 
      function profileMouseOverRight() { 
//    alert("Musen er nu inde"); 
       profileRightInterval = setInterval(function() { 
        profileMoveRight(); 
       }, 25); 
      } 
      function profileMoveLeft(){ 
       imagesWrapper.scrollLeft += -10; 
      } 
      function profileMoveRight(){ 
       imagesWrapper.scrollLeft += 10; 
      } 
      slideLeft.addEventListener('mouseout', function (e) { 
       clearInterval(profileLeftInterval); 
      }); 
      slideRight.addEventListener('mouseout', function (e) { 
       clearInterval(profileRightInterval); 
      }); 

Answer 1

您需要組合mouseover和mouseout事件。 在鼠標懸停事件上，像你一樣使用setInterval。

然後在mouseout事件中，使用clearInterval()函數來中斷你的SetInterval函數。

Answer 2

什麼，你會想要使用的是mouseover,mouseout和mousemove的組合。

概括地說，其過程是： - 上mouseover，添加mousemove事件，並記錄鼠標的x和y - 上mouseout，取出mousemove事件 - 上mousemove，比較x和y的前面步。如果它移動太多，請做點什麼。

就你而言，它看起來像你想要移動它每1px，所以你會做一些事情，每一步。

它會是這樣的：

let lastX, lastY; 
function mouseMoveFunc(e) { 
    const diffX = e.clientX - lastX; 
    const diffY = e.clientY - lastY; 
    lastX = e.clientX; 
    lastY = e.clientY; 

    // do something with diffX and diffY 
} 

slideLeft.addEventListener('mouseover', function (e) { 
    slideLeft.addEventListener('mousemove', mouseMoveFunc); 
    lastX = e.clientX; 
    lastY = e.clientY; 
} 

slideLeft.addEventListener('mouseout', function (e) { 
    slideLeft.removeEventListener('mousemove', mouseMoveFunc); 
} 

現在，每次你移動鼠標時，mousemove功能將觸發，你就可以做一些事情的差異（多少鼠標在每個滴答之間移動）。

添加和刪除mousemove事件很重要，因爲它是一個相對昂貴的事件，可以觸發很多事件，如果不需要，您不希望發生這種事件。