• 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); } }
  • 相关阅读:
    ensp上防火墙上配置nat
    简单介绍oracle误删除表和表数据的恢复方法
    linux基本命令介绍(二)
    linux基本命令介绍(一)
    Vsan分布式文件系统逻辑架构损坏恢复过程
    iPhone手机硬件拆解介绍
    硬盘分区损坏导致SqlServer数据丢失怎么恢复
    安卓手机密码工作原理及破解方式
    EMC UNITY 400存储卷删除数据恢复案例
    服务器2块硬盘掉线的数据恢复过程分享
  • 原文地址:https://www.cnblogs.com/parker-yu/p/11103795.html
Copyright © 2020-2023  润新知