鼠标悬停在绝对定位的 div 上触发

发布于 2024-08-29 23:36:36 字数 2931 浏览 6 评论 0原文

目标

当将鼠标悬停在表格单元格上时，该表格单元格的右上角会出现一个小的放大镜图标。将鼠标悬停在放大镜图标上并单击它将打开一个对话框窗口，以显示有关特定表格单元格中的项目的详细信息。我想为数百个表格单元重复使用相同的图标，而不是每次都重新创建它。

部分解决方案

有一个绝对定位和隐藏的。当 _previewable 表格单元格悬停时，将移动到正确的位置并显示。此也会在 DOM 中移动，成为 _previewable 表格单元格的子级。这使得附加到的点击处理程序能够找到 _previewable 父级，并从它的 jquery data() 对象中获取信息，该对象用于填充对话框。

这是我的 HTML 的一个非常简化的版本：

<body>
    <span id="options">
        <a class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-search"></span>
            Preview
        </a>
    </span>
    <table>
         <tr>
             <td class="_previewable">
                 <img scr="user_1.png"/>
                 <span>Bob Smith</span>
             </td>
        </tr>
   </table>
</body>

以及这个 CSS：

#options {
    position: absolute;
    display: none;
}

使用这个 jQuery 代码：

var $options = $('#options');
$options.click(function() {
    $item = $(this).parents("._previewable");
    // Show popup based on data in $item.data("id");
    Layout.renderPopup($item.data("id"),$item.data("popup"));               
});

$('._previewable').live('mouseover mouseout',function(event) {
    if (event.type == 'mouseover') {
        var $target = $(this);
        var $parent = $target.offsetParent()[0];

        var left = $parent.scrollLeft + $target.position().left 
            + $target.outerWidth() - $options.outerWidth() + 1;
        var top = $parent.scrollTop + $target.position().top + 2;

        $options.appendTo($target);
        $options.css({
            "left": left + "px",
            "top": top + "px"
        }).show();
    }
    else {
        // On mouseout, $options continues to be a child of $(this)
        $options.hide();
    }
});

问题

这个解决方案可以完美地工作，直到我的表的内容通过 AJAX 重新加载或更改。由于已从移至单元格的子级，因此它会在 AJAX 调用期间被丢弃并被替换。所以我的第一个想法是在鼠标移出表格单元格时将移回正文，如下所示：

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

但是，有了这个，鼠标悬停后立即消失。当鼠标移入时，mouseout 事件似乎会在 _previewable 上调用，即使是_previewable 的子级，并完全显示在 _previewable 表格单元格的边界内。目前，我只在 Chrome 中对此进行了测试。

问题

当鼠标仍在 _previewable 的边界内时，为什么会在 _previewable 上调用 mouseout？是因为是绝对定位的吗？
如何在不重新创建及其每个 AJAX 表引用上的点击处理程序的情况下完成这项工作？
如何

原文

Objective

Have a small magnifying glass icon that appears in the top right corner of a table cell when the table cell is hovered over. Mousing over the magnifying glass icon and clicking it will open a dialog window to show detailed information about the item in that particular table cell. I want to reuse the same icon for hundreds of table cells without recreating it each time.

Partial Solution

Have a single  that is absolutely positioned and hidden. When a _previewable table cell is hovered, the  is moved to the correct location and shown. This  is also moved in the DOM to be a child of the _previewable table cell. This enables a click handler attached to the  to find the _previewable parent, and get information from it's jquery data() object that is used to populate the contents of the dialog.

Here is a very simplified version of my HTML:

<body>
    <span id="options">
        <a class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-search"></span>
            Preview
        </a>
    </span>
    <table>
         <tr>
             <td class="_previewable">
                 <img scr="user_1.png"/>
                 <span>Bob Smith</span>
             </td>
        </tr>
   </table>
</body>

And this CSS:

#options {
    position: absolute;
    display: none;
}

With this jQuery code:

var $options = $('#options');
$options.click(function() {
    $item = $(this).parents("._previewable");
    // Show popup based on data in $item.data("id");
    Layout.renderPopup($item.data("id"),$item.data("popup"));               
});

$('._previewable').live('mouseover mouseout',function(event) {
    if (event.type == 'mouseover') {
        var $target = $(this);
        var $parent = $target.offsetParent()[0];

        var left = $parent.scrollLeft + $target.position().left 
            + $target.outerWidth() - $options.outerWidth() + 1;
        var top = $parent.scrollTop + $target.position().top + 2;

        $options.appendTo($target);
        $options.css({
            "left": left + "px",
            "top": top + "px"
        }).show();
    }
    else {
        // On mouseout, $options continues to be a child of $(this)
        $options.hide();
    }
});

Problem

This solution works perfectly until the contents of my table are reloaded or changed via AJAX. Because the  was moved from the <body> to be a child of the cell, it gets thrown out and replaced during the AJAX call. So my first thought is to move the  back to the body on mouseout of the table cell, like this:

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

However, with this, the  disappears as soon as it is mouseover. The mouseout event seems to be called on _previewable when the mouse moves into the , even though the  is a child of _previewable and fully displayed within the boundaries of the _previewable table cell. At this point, I've only tested this in Chrome.

Questions

Why would mouseout be called on _previewable, when the mouse is still within the boundaries of _previewable? Is it because the  is absolutely positioned?
How can I make this work, without recreating the  and it's click handler on each AJAX table referesh?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

用心笑 2024-09-05 23:36:36

如果您更改事件，那么您拥有的其余部分（附加到）将起作用，如下所示：

$('._previewable').live('mousenter mouseleave',function(event) {

与 mouseover 和 mouseout 不同>，当移动到子级或从子级移出时，mouseenter 和 mouseleave 事件不会触发，因此在这种情况下它们的行为将如您所愿。

不过，为了保持整洁，我会分别绑定 .live('mouseenter) 和 .live('mouseleave') 并删除 if() ，查看并了解正在发生的事情要容易得多，但可能只有我一个人:)

If you change your events then the rest of what you have (appending to <body>) will work, like this:

$('._previewable').live('mousenter mouseleave',function(event) {

Unlike mouseover and mouseout, the mousenter and mouseleave events won't fire when moving to or from a child, so they'll behave like you want in this case.

For cleanliness though, I'd bind .live('mouseenter) and .live('mouseleave') separately and remove the if(), it's much easier to look and see what's going on, might be just me though :)

回复收藏 0 原文