Question

我有一个使用jquery和大量mouseover / mouseout效果的网站。到目前为止，我使用了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在tablecell内部，所以不应该触发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哪个聊天单元有垃圾桶，哪些没有。我还向表格单元格添加了一个ID，稍后用于确定相关的垃圾箱。是的，这是笨拙的数据传递给事件方法。当然，还有document.ready函数初始化.live（）方法。

那么，我的错误在哪里？

Answer 1

我会使用jQuery事件来防止你的闪烁，它们在这里提供更智能的触发：mouseenter和mouseleave。请注意，hover现在也支持.live()。

您可以像这样使用hover（mouseenter / mouseleave）：

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

jquery现场问题

1 个答案: