问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

antd popover 触发方式：如何使用 JS 模拟鼠标 hover 事件？

头像
How丶Love
    2
    头像
    ShirleyYD
    3681541
    新手上路，请多包涵

    antd 的 popover，鼠标hover A 元素之后， 会出来B元素。新增到body标签里。
    如何使用js触发鼠标hoverA元素的这个事件。
    image.png

    // JQuery的trigger不行
$('.ant-btn.css-var-rfq.ant-btn-primary').eq(0).trigger('mouseover')
// 原生js也不行
const mouseEnterEvent = new MouseEvent('mouseenter', {
    view: window,
    bubbles: true,
    cancelable: true
});
document.querySelector(".ant-btn.css-var-R2albtj5cm.ant-btn-primary").dispatchEvent(mouseEnterEvent);
    antdpopoverjavascript
    阅读 803
    avatarAI BotBETA

    在 JavaScript 中模拟鼠标 hover 事件通常涉及到触发 mouseenter 和 mouseleave 事件。然而，对于某些复杂的 UI 组件（比如 antd 的 Popover），仅仅触发这些事件可能不足以触发组件的显示逻辑，因为组件内部可能还有额外的状态管理或事件监听逻辑。

    对于 antd 的 Popover 组件，由于其显示逻辑可能涉及到异步操作、定时器或其他复杂的状态管理，直接使用 dispatchEvent 触发事件可能无法正确模拟 hover 效果。

    如果你发现直接使用 dispatchEvent 或 jQuery 的 trigger 方法无法触发 Popover 的显示，你可以考虑以下几种替代方案：

    1. 使用真实的鼠标事件：通过编程方式移动鼠标指针到目标元素上，并触发实际的鼠标 hover 事件。这通常需要使用到浏览器的自动化工具或扩展，如 Selenium、Puppeteer 或其他类似工具。
    2. 调用组件的内部方法：如果可能的话，你可以尝试直接调用 Popover 组件内部负责显示和隐藏的方法。这通常需要对组件的源代码有深入的了解，并且可能不是所有组件都支持这样的操作。
    3. 修改组件的 props：如果 Popover 组件的显示逻辑与某些 props 相关，你可以尝试通过修改这些 props 来触发组件的重新渲染和显示。
    4. 使用组件提供的 API：如果 antd 的 Popover 组件提供了相关的 API 来控制其显示和隐藏，那么你可以使用这些 API 来实现你的需求。

    对于你提供的代码示例，如果它们不起作用，那么可能需要考虑上述的替代方案。不过，请注意，直接修改或绕过组件的内部逻辑可能会导致不可预测的行为或与其他组件的交互问题，因此在使用这些方法时需要谨慎。

    如果你只是需要临时或调试时使用这种模拟 hover 的功能，那么使用真实的鼠标事件或浏览器自动化工具可能是最简单和可靠的方法。如果你需要在代码中频繁地使用这种功能，那么可能需要考虑重新设计你的 UI 或组件架构，以便更容易地控制其显示和隐藏逻辑。

    1 个回答
    得票最新
    头像
    peterhuan
      6671527

      hover这个button触发的了mouseover事件，然后冒泡，被它的父元素接收并处理，最终显示出这个popover。
      image.png

      但是看它的源码应该监听的是mouseenter事件，这就有点奇怪了。

      • antdesign popover

        • -> antdesign tooltip

          • -> react component tooltip

            • -> react component trigger src/Popup/index.tsx

      react component trigger src/Popup/index.tsx

      .....
                  <div
                    ...
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                    onPointerEnter={onPointerEnter}
                    onClick={onClick}
                  >
                    .....
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏