jquery 在鼠标位置显示弹出窗口

2023-02-16 05:12| 来源: 网络整理| 查看: 265

这取决于您的弹出窗口（工具提示）是位于absolute还是fixed，并且父对象具有除static集之外的任何position集，以及弹出窗口是否位于 Package 器内部;或者是body的直接子节点。

前面有三个例子：**

1.* * 绝对弹出作为非静态父项的子项（有优点和缺点）1.* * 修复了弹出窗口（有优点和缺点）1.* * 绝对**弹出窗口作为文档的直接子项（最佳）

1.将绝对子对象移动到父对象中的X，Y坐标

用例：position: relative;父项中的position: absolute;弹出窗口。

如果父项具有滚动条（overflow值不是visible）X = Event.pageX + Parent.scrollLeft - Parent.offsetLeft Y = Event.pageY + Parent.scrollTop - Parent.offsetTop如果父级没有滚动条（不要使用此滚动条!）：// !! Bad practice !! X = Event.pageX - Parent.offsetLeft Y = Event.pageY - Parent.offsetTop

示例：一个一个二个一个一个一个三个一个一个一个一个一个四个一个

优点：

即使页面滚动，弹出窗口仍停留在 Package 元素内*缺点如果是实际事件target，则需要附加代码来防止弹出窗口移动-允许与内部内容交互，并且弹出窗口不移动。弹出窗口需要是特定父元素的子元素，这会导致代码重用性差。PS：解决方案是使用：一米一米一。Package 父元素（#area）需要一个position集合（而不是static），即：position: relative;2.将固定元素移动到X，Y坐标

用例：position: fixed;弹出在父项之外（或之内），但通常作为的子项。

X = Event.clientX Y = Event.clientY

示例：

优点：

如果放置在父对象（#area）的外部-如果单击是在父对象内部启动的，则不需要额外的代码来防止父对象移动。更好的代码可重用性。根据点击的元素，你可以通过改变弹出窗口的内容来重用同一个弹出窗口。Package 父元素（#area）不需要position。Event.clientX和Event.clientY是将其移动到新位置所需的全部。*缺点如果页面滚动，弹出窗口的位置相对于窗口是固定的。一个解决方法是在页面滚动时隐藏它，或者更复杂-通过坐标的不同来移动它。3.（最佳!）将绝对（* in-body *）元素移动到X，Y坐标

用例：position: absolute;弹出为body的直接子项

X = Event.clientX + window.scrollX Y = Event.clientY + window.scrollY

示例：一个10块一个11块一个12块一个

优点：

即使页面滚动，弹出位置也会相对于文档而不是滚动窗口"锚定"在同一位置。（除非Event.currentTarget是整个"body"）如果点击其内容，弹出窗口将不会改变位置。针对所有情况的建议：为了改善UX（用户体验），"浮动" 弹出窗口需要额外的计算，即确定剩余可用空间约束，以防止弹出窗口溢出窗口右/下边缘如果用户在弹出窗口之外点击，则需要额外代码来关闭弹出窗口。这可以通过简单检查点击时是否为Event.target.closest("#popup") !== EL_popup（如果true，则关闭弹出窗口）来实现。这一点有时适用于上下文菜单，但很少适用于窗口居中的模态-它有一个专用的 * 关闭 * 按钮。最佳实践示例：**

一个一个三个一个一个一个四个一个一个一个一个

【本文地址】

公司简介

联系我们