живая проблема

Question

У меня есть веб-сайт, который использует jquery и множество эффектов наведения мыши / мышки. До сих пор я использовал метод jquery .bind (), но если у вас есть> 1000 обработчиков событий, это сильно замедляет работу вашего браузера. Итак, я хочу перейти на использование .live или .delegate.

Одна часть моего портала - это область чата. Пользователь может установить сообщения чата, которые затем будут отображаться в простой таблице. Существует функция, которая при наведении курсора мыши на сообщение чата появляется мусорная корзина, позволяющая удалить сообщение (если оно принадлежит вам или вы являетесь модератором).

Мусорное ведро находится в той же ячейке таблицы, что и сообщение чата.

Проблема: с помощью .bind () это работало как шарм. Это старый код:

function CreateChatMessageContextMenu(ctrl, messageID, message, sender) {

var a = document.createElement("a");
a.href = "javascript:RemoveChatMessage(" + messageID + ");"
a.id = 'aDeleteChatMessage' + messageID;
a.style.display = 'none';
var img = document.createElement("span");
img.className = "sprite-common messages-image sprite-common-btnDelete";
a.appendChild(img);
ctrl.appendChild(a);


$(ctrl)
    .bind('mouseover', function(event) { $('#aDeleteChatMessage' + messageID).show() })
    .bind('mouseout', function(event) { $('#aDeleteChatMessage' + messageID).hide() });
return;

}

'Ctrl' является ссылкой на ячейку таблицы.

Теперь, с помощью .live () также появляется корзина, но она часто мигает, и когда я перемещаю мышь над корзиной, она исчезает или неактивна. У меня такое ощущение, что больше событий бросают или что-то в этом роде. Кажется, что «mouseout» выбрасывается при перемещении через мусорное ведро, но thrashbin находится внутри ячейки стола, поэтому mouseout не должен срабатывать. Новый код выглядит следующим образом.

$(document).ready
{
$('.jDeleteableChatMessage').live('mouseover mouseout', function(event) {
    var linkID = '#aDelete' + event.target.id;
    if (event.type == 'mouseover') {
        $(linkID).show();
    } else {
        $(linkID).hide();
    }
    return false;
});
}

function CreateChatMessageContextMenu(ctrl, messageID, message, sender) {
if (!UserIsModerator && (UserLogin != sender)) return;
ctrl.id = 'ChatMessage' + messageID;
var deleteString = 'Diese Chatnachricht löschen';
if (UserLang == '1') deleteString = 'Delete this chat message';

var a = document.createElement("a");
a.href = "javascript:RemoveChatMessage(" + messageID + ");"
a.id = 'aDeleteChatMessage' + messageID;
a.style.display = 'none';
var img = document.createElement("span");
img.className = "sprite-common messages-image sprite-common-btnDelete";
img.alt = deleteString;
img.title = deleteString;
a.appendChild(img);
ctrl.appendChild(a);

$(ctrl).addClass('jDeleteableChatMessage');

}

Я добавляю класс, чтобы сообщить jQuery, в какой ячейке чата есть корзина для мусора, а в какой нет. Я также добавляю идентификатор в ячейку таблицы, которая позже используется для определения связанного мусорного ведра. Да, это неуклюжая передача данных методу события. И, естественно, есть функция document.ready, которая инициализирует метод .live ().

Итак, где моя ошибка?

Answer 1

Я бы использовал события jQuery, чтобы предотвратить ваше мерцание, они обеспечивают более интеллектуальное срабатывание: mouseenter и mouseleave. Имейте в виду, что hover теперь поддерживается и на .live().

Вы можете использовать hover (mouseenter / mouseleave) следующим образом:

$('.jDeleteableChatMessage').live('hover', function(event) {
  $('#aDelete' + this.id).toggle();
  return false;
});