Question

我正在寻找性能最佳的脚本，为网格中的行提供悬停状态。

90％的用户拥有ie6个客户因此我无法依赖css：hover

网格是标准表，一些单元格有内部表格。

我最初开始使用带有鼠标悬停和鼠标输出的.live方法，但是当将事件委托给文档鼠标悬停时，将鼠标移动到没有网格的页面部分时会产生巨大的cpu影响。

我不想绑定到每个单独的tr。

目前我在tbody上使用事件委托，并使用.parents方法获取目标节点树中的最后一个表行。由于这个原因，我不能使用最接近的（'tr'）。

粗略实施：

//event hookup
$('table.grid>tbody')
     .mouseover(rowenter)
     .mouseout(rowleave);

function rowenter(ev){
   ev.stopPropagation();
   var $parentTr = $(ev.target).parents('tr:last');
   if ( ! $parentTr.is('.hover') ){
        $parentTr.addClass('hover');
   }
}

欢迎任何更好的实施。

Answer 1

除IE6之外的所有现代浏览器都可以使用CSS执行此操作：

tr:hover (background-color:yellow)

这应解决所有性能问题。

Answer 2

我的问题的解决方案是使用本机事件委派的最快实现。

JQuery - 网格行突出显示最佳实践

2 个答案: