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」イベントが呼び出されるたびに、mouseoverイベントがその中に新しいオブジェクトを作成しているようです。オブジェクトをクリックすると、マウスオーバーイベントが発生します。これにより、要素が置き換えられる可能性があり、onclickイベントを呼び出すことができなくなります。

イベントリストでの私の推測：-Mouseover-Mousedown->Mouseover-オブジェクトが置き換えられました。-マウスアップ（新しいオブジェクトはマウスアップのみを受信するため、クリックとしてカウントされません）

編集：

目標がマウスホバー効果を作成することだけである場合は、CSSのホバーキーワードを使用する必要があります。

あなたがやろうとしていることを本質的に行うこのフィドルを見てください：http：//jsfiddle.net/Tb2kK/27/

編集：あなたがそれをしているのと同じようにそれをするために、あなたはdivがすでに存在するかどうかをチェックする必要があります。1つの方法は、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 に答える