0

如何使用 Chrome 在表格单元格 (td) 中为表单标签调用 onchange 事件？以下代码适用于除 chrome 之外的所有浏览器。令人惊讶的是它适用于 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 回答