1

鼠标悬停在单元格上会在该单元格内生成一个 div。那个 div 有一个 onclick。但是这个 onclick 没有被执行。这是一些示例代码：JSFiddle

JavaScript：

var oldCell='';
function addDiv(cell){
    if(oldCell != ''){
        oldCell.innerHTML = '';
    }
    cell.innerHTML = "<div class='innerDiv' onclick='console.log(this.parentNode);'></div>";
    oldCell = cell;
}

HTML

<table border='1px solid black'>
    <tr>
        <td class='cell' onmouseover='addDiv(this)'></td>
        <td class='cell' onmouseover='addDiv(this)'></td>
    </tr>
     <tr>
        <td class='cell' onmouseover='addDiv(this)'></td>
        <td class='cell' onmouseover='addDiv(this)'></td>
    </tr>
</table>​

我试过专注于 div，但这也不起作用。我也尝试过给单元格 onclick，然后专注于单元格而不是 div，但这在 Chrome 中不起作用，但在 FF 中起作用。

4

2 回答 2

4

似乎每次调用“鼠标悬停”事件时，鼠标悬停事件都会在其中创建一个新对象。单击对象会触发 mouseover 事件，这可能会替换元素，因此无法调用 onclick 事件。

我对事件列表的猜测： - Mouseover - Mousedown -> Mouseover - 已替换对象。- Mouseup（不计为点击，因为新对象只接收鼠标向上）

编辑：

如果您的目标只是创建鼠标悬停效果，那么您应该使用 CSS 的 hover 关键字。

看看这个小提琴，它基本上可以做你想做的事情：http: //jsfiddle.net/Tb2kK/27/

编辑：要与您的操作方式类似，您需要检查 div 是否已经存在。一种方法是分配一个 id：http: //jsfiddle.net/mZdpN/

于 2012-06-04T16:15:29.833 回答
0

替换你的js

<script type="text/javascript">
    var oldCell = null;
    function addDiv(cell){
        if (oldCell != null){
            oldCell.innerHTML = '';
        }

        var div = document.createElement('div');
        div.className = 'innerDiv';
        div.onclick = function() {
            console.log(this.parentNode);
        };
        cell.appendChild(div);   
        oldCell = cell;
    }
</script>
于 2012-06-04T16:06:38.770 回答