Question

我对onmouseevent的表格单元格有问题。我正在做的是在jquery的帮助下删除和创建html表格单元格。页面加载时，此事件触发完全正常。但是在相同位置再次移除和插入表格单元格后，不会触发onmouseover事件。以下是我所做的代码......

var ModularAdHolderCell = '';
var MergedCellValues = new Array();
$('#our_table tr').each(function (i, el) {
  for (var cellCnt = 0; cellCnt < this.cells.length; cellCnt++) {
    if ($(this.cells[cellCnt]).attr('class') == 'highlighted' || $(this.cells[cellCnt]).attr('class') == 'OrangeBackground highlighted') {
            var id = $(this.cells[cellCnt]).attr('id');
            ModularAdHolderCell = id;
            id = 'hdn_' + id;
            var MergedCells = $(this.cells[cellCnt]).find('input:hidden').val();
            if (MergedCells != '')
                MergedCellValues = MergedCells.trim().split('=');
        }
    }
});

var row = document.all.our_table.rows[0];
var TotalCellInRow = row.cells.length;
var Cell = row.insertCell(TotalCellInRow);
var element1 = document.createElement("input");
element1.type = "hidden";
element1.id = "hdn_" + MergedCellValues[cnt];

row.cells(TotalCellInRow).setAttribute('onmouseover', 'MOuseOver(this)');
row.cells(TotalCellInRow).setAttribute('onmouseout', 'MouseOut()');
row.cells(TotalCellInRow).setAttribute('onmousemove', 'MOuseOver(this)');
row.cells(TotalCellInRow).setAttribute('onmouseenter', 'MOuseOver(this)');

row.cells(TotalCellInRow).setAttribute('unitheight', Unitwidth);
row.cells(TotalCellInRow).setAttribute('unitwidth', UnitHeight);
row.cells(TotalCellInRow).setAttribute('id', MergedCellValues[cnt]);

row.cells(TotalCellInRow).setAttribute('width', Unitwidth);
row.cells(TotalCellInRow).setAttribute('height', UnitHeight);
row.cells(TotalCellInRow).appendChild(element1);

$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseover', 'MOuseOver(this)');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseout', 'MouseOut()');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmousemove', 'MOuseOver(this)');
$(row).find('#' + MergedCellValues[cnt] + '').attr('onmouseenter', 'MOuseOver(this)');

这里MergedCellValues是单元格id的数组，上面的代码在单元格的循环中。

有谁可以告诉为什么它不会为单元格触发onmouseover事件？

Answer 1

设置属性不是附加事件处理程序的预期方式，您可以在这里简化并加快速度，删除所有.setAttribute('onmouseover', 'MOuseOver(this)');逻辑...所有8行，然后只是将一个处理程序集附加到<table>以处理所有这些：

$("#our_table")
   .delegate("td", "mouseover mousemove mouseenter", MOuseOver)
   .delegate("td", "mouseout", MouseOut);

然后在您的MOuseOver和MouseOut函数中，只需使用this来引用该单元格。

这会将处理程序附加到<table>元素以侦听冒泡的其他鼠标事件...不需要为每个单元格绑定它们，这是远更便宜并且可以工作当前和新的细胞相结合。

onmouseover事件不会为表格单元格触发

1 个答案: