Fatal编程技术网
  • jquery/
  • Jquery 绝对定位div上触发鼠标悬停 客观的

Jquery 绝对定位div上触发鼠标悬停 客观的

jquery

Jquery 绝对定位div上触发鼠标悬停 客观的,jquery,live,css-position,Jquery,Live,Css Position,将表格单元格悬停在上方时，表格单元格右上角会显示一个小放大镜图标。将鼠标移到放大镜图标上并单击它将打开一个对话框窗口，以显示特定表格单元格中项目的详细信息。我希望对数百个表格单元格重复使用同一图标，而不必每次都重新创建它 部分解 拥有一个绝对定位和隐藏的。当可预览的表格单元格悬停时，移动到正确的位置并显示。此也在DOM中移动，成为\u previewable表单元格的子元素。这使附加到的单击处理程序能够找到\u previewable父对象，并从用于填充对话框内容的jquery data（）对象

将表格单元格悬停在上方时，表格单元格右上角会显示一个小放大镜图标。将鼠标移到放大镜图标上并单击它将打开一个对话框窗口，以显示特定表格单元格中项目的详细信息。我希望对数百个表格单元格重复使用同一图标，而不必每次都重新创建它

部分解 拥有一个绝对定位和隐藏的
。当可预览的表格单元格悬停时，
移动到正确的位置并显示。此
也在DOM中移动，成为
\u previewable
表单元格的子元素。这使附加到
的单击处理程序能够找到
\u 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>
使用此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();
    }

$('._previewable').live('mousenter mouseleave',function(event) {
但是，这样一来，
鼠标一过就会消失。当鼠标移动到
中时，似乎会在
\u previewable
上调用mouseout事件，即使
是
\u previewable
的子项，并且完全显示在
\u previewable
表格单元格的边界内。在这一点上，我只在Chrome上测试过

问题
  • 当鼠标仍在
    \u previewable
    的边界内时，为什么要在
    \u previewable
    上调用mouseout？是因为
    绝对定位吗

  • 在不重新创建每个AJAX表referesh上的
    及其click处理程序的情况下，如何实现这一点

    • 为了避免每个细胞都有微小的图像，这看起来需要做大量的工作。通过“重用”元素的一个实例，您实际上并没有获得多少收益。浏览器只需下载一次图像。从性能的角度来看，摆弄DOM树比仅仅切换高亮显示元素的显示属性需要更多的资源

    最简单的方法可能是将
    放在您打印出的每个单元格中，然后使用CSS隐藏/显示。

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

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

    $('._previewable').live('mousenter mouseleave',function(event) {
    与
    mouseover
    和
    mouseout
    不同，
    mousenter
    和
    mouseleave
    事件在移动到孩子或从孩子身上移动时不会触发，因此在这种情况下，它们的行为将与您想要的一样

    不过为了清洁起见，我会分别绑定
    .live（'mouseenter
    ）和
    .live（'mouseleave'）
    ，然后移除
    if（）
    ，这样更容易查看和查看发生了什么，可能只有我：）

    可能问题在于，您将
    移回主体，而不检查它是否是事件目标的子对象。我同意，但在我的实际应用程序中，有相当多的元素，而不仅仅是一个图标。@Nick:太好了！非常感谢。奇怪的是，它不适用于live（'mouseenter mouseleave'，…），但当我将它拆分为两个独立的live绑定（如您所建议的）时，它就起了作用。请注意，
    live（）
    现在已被弃用。新语法是：
    $（document）.on（'mousenter'，'.\u previewable'，function（event）{}）-您可以使用更具体的父元素交换
    文档
    ，以获得更好的性能。（见：）