jquery之鼠標滑過圖片mousemove事件


 需要解決的問題:鼠標停在圖片上面的時候的 現在這個張圖片的相關信息,

 我的第一個感覺是使用鼠標事件:mousemove 當他/她停留在圖片上面都 時候就可以觸發相應顯示的事件, mouseout離開的時候觸發隱藏事件


但是在實際的完成中發現:鼠標停留在圖片上 信息會不停的抖動,查閱相關資料發現,手冊對mouseover事件的解釋是:

注意:用戶把鼠標移動一個像素,就會發生一次 mousemove 事件。處理所有 mousemove 事件會耗費系統資源。請謹慎使用該事件。

 也就是說:我們鼠標是即使有一個像素的抖動都會觸發顯示事件 , 難怪會造成圖片信息的資源


解決的辦法是:使用hover,官方手冊對這個方法的解釋:

一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。這是一個自定義的方法,它為頻繁使用的任務提供了一種“保持在其中”的狀態。

當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。而且,會伴隨着對鼠標是否仍然處在特定元素中的檢測(例如,處在div中的圖像),如果是,則會繼續保持“懸停”狀態,而不觸發移出事件(修正了使用mouseout事件的一個常見錯誤)。


實例代碼:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM