只觸發jQuery mousemove事件一次

Question

我試圖做出退出彈出窗口，我可以使用下面的代碼。 只要用戶的鼠標移出瀏覽器區域，就會彈出一個對話框。但每當彈出窗口出現時都很煩人。我想限制它只是一次。 有人可以幫助我嗎？

jQuery(document).ready(function() { 
    jQuery(document).mousemove(function(e) { 
     jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2)); 
     jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2)); 
     if(e.pageY <= 5) 
     { 
      // Show the exit popup 
      jQuery('#exitpopup_bg').fadeIn(); 
      jQuery('#exitpopup').fadeIn(); 
     } 
    }); 
}); 

Answer 1

使用jQuery的one()功能：http://api.jquery.com/one/

jQuery(document).ready(function() { 
     jQuery(document).one('mousemove', function(e) { 
      jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2)); 
      jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2)); 
      if(e.pageY <= 5) 
      { 
       // Show the exit popup 
       jQuery('#exitpopup_bg').fadeIn(); 
       jQuery('#exitpopup').fadeIn(); 
      } 
     }); 
}); 

Answer 2

插入這樣的：

e.stopPropagation(); 

只是在mousemouve函數的第一個列表。

.... 
jQuery(document).mousemove(function(e) { 
    e.stopPropagation(); 
    jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2)); 
    ... 

Answer 3

(function($) { 

    $(document).ready(function() { 
     var leftPage = false; 
     $(document).mousemove(function(e) { 

      if(e.pageY <= 5) 
      { 
       if (!leftPage) { 
        var exitPopup = $('#exitpopup'); 
        exitPopup.css('left', (window.innerWidth/2 - exitPopup.width()/2)); 
        exitPopup.css('top', (window.innerHeight/2 - exitPopup.height()/2)); 
        $('#exitpopup_bg').fadeIn(); 
        exitPopup.fadeIn(); 
       } 

       leftPage = true; 
      } else { 
       leftPage = false; 
      } 
     }); 
    }); 

})(jQuery); 

「如果用戶離開頁面，他們還沒有離開然後設置彈出窗口。接下來馬克，他們已經離開了頁面（leftPage =真）」

「不要試圖和重新設置彈出窗口直到他們回來在網頁」

夫婦額外的：

• ，而不是調用jQuery所有我們把整個東西包裝在一個函數包裝中的時候，所以你可以使用$。
• 而不是做這個每次$('#exitpopup');我們緩存到一個變量exitPopup的，因此不會每次都（低效率）

Answer 4

有幾件事情在這裏做查找。首先，形式上的，你應該將你的CSS改變的if塊內，因爲你真的不需要這些運行每用戶移動他們的鼠標時，你顯示彈出之前右：

if(e.pageY <= 5) 
{ 
    // Alter CSS as appropriate 
    jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2)); 
    jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2)); 

    // Show the exit popup 
    jQuery('#exitpopup_bg').fadeIn(); 
    jQuery('#exitpopup').fadeIn(); 
} 

其次，您可能希望通過分離事件處理程序來避免再次顯示它。我建議您使用jQuery .on()和.off()語法，而不是簡寫.mousemove()，因爲它更易於閱讀和維護。我還建議你在你的事件中使用命名空間，這樣你就可以確保你不會分離可能在其他腳本中設置的事件。

jQuery(document).on('mousemove.yourNamespace', function (e) { 
    if(e.pageY <= 5) 
    { 
     // Alter CSS as appropriate 
     jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2)); 
     jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2)); 

     // Show the exit popup 
     jQuery('#exitpopup_bg').fadeIn(); 
     jQuery('#exitpopup').fadeIn(); 

     // now detach the event handler so it won't fire again 
     jQuery(document).off('mousemove.yourNamespace'); 
    } 
} 

最後，如果您包裝所有這些代碼在​​，你會不會寫出來，jQuery每一次，你仍然不會有全局命名空間與$擔心可能發生的衝突。

(function ($) { 
    $(document).on('mousemove.yourNamespace', function (e) { 
     if(e.pageY <= 5) 
     { 
      // Alter CSS as appropriate 
      $('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2)); 
      $('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2)); 

      // Show the exit popup 
      $('#exitpopup_bg').fadeIn(); 
      $('#exitpopup').fadeIn(); 

      // now detach the event handler so it won't fire again 
      $(document).off('mousemove.yourNamespace'); 
     } 
    } 
})(jQuery); 

jQuery的文檔爲.on()，.off()，並event.namespace供參考。