TIPS-處理onClick事件中的特例
各位同學，我們今天要解的題目如下:
ASP.NET網頁中有一個控件產生的DataGrid，其在<TR>上放入了onclick事件，以達到點選該列的任何位置都會觸發特定事件，但如果其中有個<TD>裡希望在onclick時執行特定邏輯，而不要觸發原本<TR>上的onclick，要怎麼做?
面對以上的例子，低年級同學可能會想: 那就不要放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>