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

У меня сложная проблема со сценарием, который я пишу с помощью 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
person typeof    schedule 25.04.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

Я удалил прослушиватель событий 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();
});
person typeof    schedule 26.04.2011

arrow_upward
0
arrow_downward

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

person ChrisThompson    schedule 25.04.2011
comment
mouseenter и mouseleave не работают с делегированием событий. В любом случае это не решит проблему, поскольку панель инструментов не является дочерним элементом строки. - person typeof; 26.04.2011

arrow_upward
0
arrow_downward

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

person JSager    schedule 25.04.2011