JQuery觸發hover事件無效時使用js原生的觸發事件方法


需求:在開發一個從微信公眾號后台管理網頁上爬取數據的chrome插件時,有部分頁面元素是只顯示了部分摘要信息的,需要把鼠標移上去后才能顯示全部信息(類似title的彈出顯示)。這就需要在chrome插件中實現觸發該元素的hover事件(或者mouseenter事件),讓全部信息顯示再從彈窗中獲取數據。(由於開發時的環境需要客戶提供微信公眾號的后台賬號等環境,這事兒過去一段時間了,無法再演示一遍)

環境:chrome瀏覽器

問題:使用常見的jQuery觸發事件方法無法成功觸發事件並彈出窗口,現象表現為元素本身的hover事件方法無法觸發,但是在console里嘗試重新注冊一個事件(如alert("test")),再觸發該事件則能成功觸發。折騰了好一段時間,最好使用js原生的觸發事件方法成功實現邏輯。至於jQuery為什么不行,尚未弄清。

解決方案:

  

/**
* js原生的觸發事件方法,比jQuery方法適用性廣一些,在某些情況下jQuery觸發事件無效,適用本方法有效
* element 觸發事件的對象
* eventNameStr 事件的名稱
* 調用示例 triggerEvent(document.getElementById("a_test"),"mouseover");
*/ function triggerEvent(element,eventNameStr){ if (document.createEvent) { event = document.createEvent("HTMLEvents"); event.initEvent(eventNameStr, true, true); event.eventName = eventNameStr; element.dispatchEvent(event); } else { event = document.createEventObject(); event.eventType = eventNameStr; event.eventName = eventNameStr; element.fireEvent("on" + event.eventType, event); } }

 


免責聲明!

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



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