Question

在单元格上的onmouseover会在该单元格内生成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中也是如此。

Answer 1

每次调用“mouseover”事件时，mouseover事件似乎都在其中创建一个新对象。单击该对象将触发mouseover事件，该事件可能会替换该元素，从而无法调用onclick事件。

我对活动清单的猜测： - 鼠标移到 - Mousedown - ＆gt;鼠标移到 - 更换了对象。 - Mouseup（不计入点击，因为新对象只接收鼠标）

编辑：

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

看到这个小提琴基本上是你要做的事情：http://jsfiddle.net/Tb2kK/27/

编辑：为了做到这一点，你需要检查div是否已经存在。一种方法是分配一个ID：http://jsfiddle.net/mZdpN/

Answer 2

用

替换你的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>

点击事件未执行

2 个答案: