0

Chromeでフォームタグのテーブルセル(td)でonchangeイベントを呼び出す方法は? 次のコードは、クロムを除くすべてのブラウザーで機能します。驚くべきことに、Opera 15 で動作します (最新の Google Chrome と同じエンジン (webkit/blink) を使用する必要があります)。

<table><tr>
    <td onchange="bla()">
        <select>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
            <option value="n">foo</option>
        </select>
    </td>

    <td onchange="bla()">
        <input type="text" />
    </td>

    <td>
    </td>
</tr></table>



<script>
function bla() {
    alert('something changed...');
}
</script>

イベントをselectタグにバインドできることは知っていますが、私のWebアプリケーションではうまく機能しません

4

1 に答える 1

2

が正常に機能しない理由はonchange、変更されるのはセルではなく、内部のフォーム要素だからです。確かに、テーブルの内容をクリックすると、テーブルもクリックされます。それは理にかなっています。最初に玄関のドアを開けずに、家の中のドアを開けることはできません。
ただし、このイベントが発生した部屋を変更せずに、部屋に入って髪を切る (自分に変更イベントを発生させる) ことはできます。その点で、変更イベントが親セルで発生しないのは理にかなっています。

ただし、イベントはDOM をトラバースし、表のセルを通過するため、そこで取得できますが、HTML 属性を使用することはできません。（ところで：それらをできるだけ使わないようにしてください）。

JS のテーブル全体にリスナーをバインドしてみてください。そうすれば、すべてのイベントに対して機能するリスナーは 1 つだけになります (イベント委任と呼ばれます)。

//assume tbl has id foobar:
document.getElementById('foobar').addEventListener('change',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    var name = target.id || target.getAttribute('name');
    alert('the ' + name + ' element changed!');
},false);

これは、イベント委任のもう少し複雑なバージョンで、IE8 の選択要素の変更イベントも処理します。(変更イベントは、古い IE ではバブリングしません)。

いくつかのリンク:

于 2013-07-04T13:09:11.747 に答える