Javascript - 鼠标事件和浮动元素的问题答案

【问题标题】：Javascript - Issue with mouse events and floating elementJavascript - 鼠标事件和浮动元素的问题
【发布时间】：2011-08-12 13:02:23
【问题描述】：

我使用 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。
如果可能，我还想避免使用计时器来解决这个问题。

提前致谢！

【问题讨论】：

标签： javascript jquery css mouseover mouseout

【解决方案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();
});

【讨论】：

【解决方案2】：

尝试使用 mouseenter 和 mouseleave，而不是 mouseover 和 mouseout。

【讨论】：

mouseenter 和 mouseleave 不适用于事件委托。无论如何它不会解决问题，因为工具栏不是该行的子元素。

【解决方案3】：

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

【讨论】：