Javascript 单击未执行的事件

单元格上的onmouseover在该单元格内生成div。那个div有一个onclick。但是这个onclick没有被执行。下面是一些示例代码：

JavaScript:

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

var oldCell=''；
函数addDiv（单元格）{
如果（旧单元格！=''）{
oldCell.innerHTML=''；
}
cell.innerHTML=“”；
oldCell=cell；
} 

HTML

​

我试着把注意力集中在div上，但这也不行。我也尝试过给单元格一个onclick，然后将注意力集中在单元格上而不是div上，但这在Chrome中不起作用，但在FF中起作用。

将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>

var-oldCell=null；
函数addDiv（单元格）{
if（oldCell！=null）{
oldCell.innerHTML=''；
}
var div=document.createElement（'div'）；
div.className='innerDiv'；
div.onclick=函数（）{
console.log（this.parentNode）；
};
子单元（div）；
oldCell=cell；
}

将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>

var-oldCell=null；
函数addDiv（单元格）{
if（oldCell！=null）{
oldCell.innerHTML=''；
}
var div=document.createElement（'div'）；
div.className='innerDiv'；
div.onclick=函数（）{
console.log（this.parentNode）；
};
子单元（div）；
oldCell=cell；
}

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

我对事件列表的猜测： -鼠标盖 -鼠标向下->鼠标上方 -对象被替换。 -鼠标悬停（不算作单击，因为新对象只接收鼠标悬停）

---

编辑：

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

看看这把小提琴，它基本上完成了你想做的事情：

---

---

编辑：若要执行类似的操作，需要检查div是否已经存在。一种方法是分配一个id:

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

我对事件列表的猜测： -鼠标盖 -鼠标向下->鼠标上方 -对象被替换。 -鼠标悬停（不算作单击，因为新对象只接收鼠标悬停）

---

编辑：

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

看看这把小提琴，它基本上完成了你想做的事情：

---

---

编辑：若要执行类似的操作，需要检查div是否已经存在。一种方法是分配一个id:

onclick事件对我来说很好，它将父节点的html打印到控制台，对我来说也很好。（Firefox）它对我不起作用（Chrome-dev）。但它在Chrome和Firefox中都不起作用。没有错误，没有打印，没有任何东西…在Firefox（12）中对我有效，而不是Chrome（19）。有趣的是，即使您将click事件处理程序添加到

td

，它也不会被执行。这很可能是一个bug。onclick事件对我来说效果很好，它将父节点的html打印到控制台。它对我来说也很好。（Firefox）它对我不起作用（Chrome-dev）。但它在Chrome和Firefox中都不起作用。没有错误，没有打印，没有任何东西…在Firefox（12）中对我有效，而不是Chrome（19）。有趣的是，即使您将click事件处理程序添加到

td

，它也不会被执行。这很可能是一个bug。它在FF中对我有效很好看我在寻找chromeit在FF中对我有效很好看我在寻找Chromei你的观察是正确的：

mouseover

事件是在

mousedown

上触发的。奇怪的是，当我关注单元格时，在FF中它会执行divonclick。。。但chrome仍然没有@arbitter:Firefox甚至没有专注地执行处理程序（至少对我来说）。浏览器使用不同的引擎，因此在一个浏览器中工作的内容不一定在另一个浏览器中工作。例如，Chrome中似乎存在一个bug，通过编程更改光标类型也会触发

mousemove

事件。因此，如果DIV已经存在，就不要创建它。那么我应该如何修复它呢？我也尝试过给这个单元格一个onclick事件，并将注意力集中在这个单元格上，但Chrome仍然没有执行两个onclick。你的观察是正确的：

mouseover

事件是在

mousedown

上触发的。奇怪的是，当我关注这个单元格时，在ff中它确实执行div onclick。。。但chrome仍然没有@arbitter:Firefox甚至没有专注地执行处理程序（至少对我来说）。浏览器使用不同的引擎，因此在一个浏览器中工作的内容不一定在另一个浏览器中工作。例如，Chrome中似乎存在一个bug，通过编程更改光标类型也会触发

mousemove

事件。因此，如果DIV已经存在，就不要创建它。那么我应该如何修复它呢？我也尝试过给这个单元格一个onclick事件，然后专注于这个单元格，但是Chrome仍然不执行这两个onclick。