Thursday, June 26, 2008 - 文章

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>

搜尋

Go

<June 2008>
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345
 
RSS
【工商服務】
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication