1

我使用 jQuery 编写的脚本遇到了一个棘手的问题。

我有一个表格，如果将鼠标悬停在任何行上（标题行除外），它将在任何行上出现一个工具栏。这很好用，这是它的代码：

$cont.delegate('tr:not(:eq(0))','mouseover mouseout', function(e){
    var $this = $(this);
    var pos = $this.position();
    if(e.type == 'mouseout') {
        $actionToolbar.hide();
    } else {
        $actionToolbar.css({
            'top'  : pos.top  + $this.height()/2 - $actionToolbar.height()/2,
            'left' : pos.left + $this.width()    - $actionToolbar.width()
        }).show();
    }
});

当我将鼠标悬停在操作工具栏上时会出现问题。该行的mouseout事件触发，工具栏隐藏（然后进入显示/隐藏的无限循环）。这是因为工具栏是绝对定位的，而不是该行的子项。

这是交易：

  • 我不希望它成为该行的子行，因为这意味着我必须为每个鼠标事件删除并附加到 DOM ——这不如简单地更新元素的 CSS 有效。
  • 如果可能的话，我也想避免使用计时器来解决这个问题。

提前致谢！

4

3 回答 3

1

没有一点耐心，我已经找到了自己的答案：

我已经删除了mouseout事件监听器并转而使用 jQuery 的data()方法来跟踪先前悬停的行。然后，我mouseleave向容器中添加了一个事件侦听器。

它完美地工作：

$cont.delegate('tr:not(:eq(0))', 'mouseover', function(e) {
    var $this = $(this);
    $($cont.data('COLStorage.row')).removeClass(opts.hoverClass);
    $this.addClass(opts.hoverClass);
    var pos = $this.position();
    $actionToolbar.css({
        'top': pos.top + $this.height() / 2 - $actionToolbar.height() / 2,
        'left': pos.left + $this.width() - $actionToolbar.width()
    }).show();
    $cont.data('COLStorage.row', $this);
}).mouseleave(function(e) {
    $actionToolbar.fadeOut();
});
于 2011-04-26T19:05:54.807 回答
0

尝试 mouseenter 和 mouseleave 而不是 mouseover 和 mouseout。

于 2011-04-25T19:33:12.147 回答
0

在您的操作工具栏上放置一个标记 css 选择器并使用 jquery 检查它。如果您的事件的目标具有该标记选择器，则不要应用。

于 2011-04-25T19:38:13.630 回答