面對以上的例子，低年級同學可能會想: 那就不要放onclick在TR上，每個TD上放一個onclick，不就可以任意控制? 這個構想不能說錯，但有點囉嗦。試想，如果一個TR裡有30個TD，豈不要寫29個onclickA加1個onclickB，更何況題目中的TR onclick是控件放的，怎麼做等於干擾了原本的設計。
比較有效率的方法，是讓指定的TD變成整個TR onclick事件的【特例】，這樣程式會比較簡潔。要做到所謂的事件邏輯中的特例，就不能不提到Event Bubbling的觀念，當某個容器元素(如<TR>)包著另一個子元素(如<TD>)，使用者按下滑鼠，這兩個元素的onclick事件會被"先後"觸發，這個觀念在UI相關的程式開發中都有，中年級同學應該都有學過。參考資料
由於onclick事件的觸發順序會是先TD再TR，因此我們可以為TD指定另外的onclick事件，並在其中要求停止觸發後續的onclick事件。在IE中的寫法是window.event.cancelBubble = true;，Firefox中則可以用e.stopPropagation();
<html><body>
<table border="1">
<tr onclick="rowClick();">
<td>AA</td>
<td><input type="button" value="BB" onclick="btnClick()" /></td>
<td><span onclick="cellClick(event);">CC</span></td>
</tr>
</table>
<script type="text/javascript">
function rowClick() { alert("ROW!"); }function cellClick(evt) { alert("CELL!"); if (window.event) //for IE
window.event.cancelBubble = true;
else //for Firefox
evt.stopPropagation();
}
function btnClick() { alert("BUTTON!"); }</script>
</body></html>