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

6yoyoihd  于 2022-12-06  发布在  Go
关注(0)|答案(1)|浏览(142)

我有一个下拉菜单,我用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 之外,并且绝对定位在输入框上:

fquxozlt

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>

相关问题