Javascript - проблема с событиями мыши и плавающим элементом

Question

У меня есть хитрая проблема со сценарием, который я пишу с использованием 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 элемента.
• Я также хотел бы избегать таймеров , чтобы решить эту проблему, если это возможно.

Заранее спасибо!

Answer 1

Имея немного терпения, я пошел и нашел свой собственный ответ:

Я удалил прослушиватель событий mouseout и перешел к использованию data() метода jQuery для отслеживания ранее зависшей строки. Затем я добавляю прослушиватель событий 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();
});

Answer 2

Поместите селектор маркера css на панель инструментов действий и проверьте его с помощью jquery. Тогда не применяйте, если у цели вашего мероприятия есть этот селектор маркера.

Answer 3

Попробуйте mouseenter и mouseleave вместо mouseover и mouseout.