Chrome 如何防止鼠标离开插件图标？

6yoyoihd 于 2022-12-06 发布在 Go

关注(0)|答案(1)|浏览(141)

我有一个下拉菜单，我用JS隐藏/显示基于mouseleave和mouseenter事件的菜单。我用JS来隐藏菜单并设置超时，这样用户就不会因为鼠标摇晃而意外地关闭菜单。
我也在使用KeePassXC浏览器插件。这会在密码输入栏中创建一个按键图标。
当我将鼠标悬停在下拉菜单中的按键图标上时，将触发mouseleave事件。

以下是一个示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
  <div style="padding:20px;background-color:grey" id="wrapper">
        <input type="password">
  <div>
  
  <script>
  const wrapper = document.getElementById('wrapper');
  wrapper.addEventListener("mouseleave", function(event){
    console.log('LEAVING');
  });
  </script>
  </body>
</html>

我怎样才能在鼠标离开时捕捉到插件图标的悬停？有没有一个通用的方法，也可以覆盖其他可能的插件，添加图标到输入元素？
编辑：来自Cbroe的提示，鼠标离开是因为按键图标在 Package 之外，并且绝对定位在输入框上：

google-chrome

来源：https://stackoverflow.com/questions/73891129/how-to-prevent-mouse-leave-for-plugin-icon

1条答案

按热度按时间

fquxozlt1#

正如Cbroe的评论中所说的，鼠标离开是因为按键图标在 Package 器之外，并且绝对定位为出现在输入框上。
此外，输入的自动完成也会触发mouseleave。
若要修正这个问题，您可以检查鼠标器坐标是否仍在 Package 函数中，并在mouseleave事件中进行检查：

<script>
  const wrapper = document.getElementById('wrapper');
  wrapper.addEventListener("mouseleave", function(event){
      const wrapperBounding = wrapper.getBoundingClientRect();
        if (event.clientX >= wrapper.left && event.clientX <= wrapper.right &&
            event.clientY >= wrapper.top && event.clientY <= wrapper.bottom) {
            return
        }
        console.log('LEAVING');
  });
</script>

赞(0）回复(0）举报 2022-12-06

我来回答

Chrome 如何防止鼠标离开插件图标？

1条答案

相关问题

热门标签

最新问答