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

fzwojiic 于 2023-02-15 发布在 jQuery

关注(0)|答案(2)|浏览(245)

我在鼠标点击的确切位置弹出窗口时遇到了麻烦。我希望能够点击一个DIV（位于表格单元格内），并在每次点击该DIV时弹出窗口。
现在，我有弹出工作，但无论我尝试弹出DIV是一半的方式向下页。
超文本标记语言

<ul class="customdropdown" style="display:none;" id="xxx<?php echo $fetch['unit_no']; ?>" role="menu" aria-labelledby="menuitems">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#"</i>Link 2</a></li>

</ul>

查询

$(document).ready(function () {
        $('#myDiv<?php echo $fetch['unit_no']; ?>').click(function (e) {
            var myDiv = document.getElementById('myDiv<?php echo $fetch['unit_no']; ?>');
            var leftx = e.pageX-myDiv.offsetLeft;
            var topy = e.pageY-myDiv.offsetTop;

            $("#xxx<?php echo $fetch['unit_no']; ?>")
                .css({
                    position: 'absolute',
                    left: leftx,
                    top: topy,
                    display: 'block'
                })
           
        });
    });

下面是正在发生的事情的截图：

这是否与DIV的定位有关？

jquery

来源：https://stackoverflow.com/questions/70690817/show-popup-on-mouse-location

2条答案

按热度按时间

irtuqstp1#

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

- 前面有三个例子：**

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

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;弹出在父项之外（或之内），但通常作为<body>的子项。

X = Event.clientX  
Y = Event.clientY

示例：

const el = (sel, par) => (par||document).querySelector(sel);

const elArea  = el("#area");
const elPopup = el("#popup");

const showPopup = (evt) => {
  Object.assign(elPopup.style, {
    left: `${evt.clientX}px`,
    top: `${evt.clientY}px`,
    display: `block`,
  });
};

elArea.addEventListener("click", showPopup);

body {
  height: 300vh; /* Just to force some scrollbars */
}

#area {
  /* position: relative; /* not necessary any more */
  height: 150px;
  background: #eee;
  margin: 40px;
}

#popup {
  position: fixed;
  height: 30px;
  background: gold;
  display: none;
}

<div id="area">
  Click here to shop popup, and scroll the window
</div>

<div id="popup">Popup fixed</div>

优点：

如果放置在父对象（#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，则关闭弹出窗口）来实现。这一点有时适用于上下文菜单，但很少适用于窗口居中的模态-它有一个专用的 * 关闭 * 按钮。
- 最佳实践示例：**

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

赞(0）回复(0）举报 2023-02-15

ukqbszuj2#

如果你想在鼠标点击的确切位置得到一个弹出窗口，你真的只需要知道鼠标在窗口中点击的位置。你的点击监听器已经瞄准了DIV，所以这只会记录这个区域的点击，所以你可以只使用event.clientX和event.clientY来得到指针的位置。

$('#myDiv').click(function (event) {

  $("#xxx").css({
    left: event.clientX,
    top: event.clientY,
    display: 'block'
  });

});

赞(0）回复(0）举报 2023-02-15

我来回答

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

2条答案

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

2.将固定元素移动到X，Y坐标

3.（最佳!）将绝对（* in-body *）元素移动到X，Y坐标

针对所有情况的建议：

相关问题

热门标签

最新问答