<div onclick="alert('A');">文字<a href="javascript://"" onclick="alert('B');">超連結</a></div>
當按下"超連結"字樣時,會跳出 A 還是 B?
實作的結果是:按"超連結"時,會跳出 B 然後跳出 A,而按下"文字"時,則只跳出 A。現在的問題是:按"超連結"字樣時,如何只跳出 B,而不跳出 A。
function amIclicked(e,elm){ e=e||event; var targ=e.target||e.srcElement; if(targ.id==elm.id) return true; else return false; } function oneClick(evt,elm){ if(amIclicked(evt,elm)){ alert('One is clicked'); } } function twoClick(evt,elm){ if(amIclicked(evt,elm)){ alert('Two is clicked'); } }HTML 部份
<style> #one{ width: 200px; height: 300px; background-color: red; } #two{ width: 50px; height: 70px; background-color: yellow; margin-left: 10; margin-top: 20; } </style> <div id="one" onclick="oneClick(event, this);"> one <div id="two" onclick="twoClick(event, this);"> two </div> </div>
為了讓讀者識別,有些變數名稱,我改掉,原文出處請按這裡
Javascript 有 Event 物件,簡單講,就是事件控制,然而,另有個"藏鏡人"隨時在監看用者動作,這個物件名稱叫作 e,在 IE 中則叫作 event。
e 物件能作些什麼呢?比如說,使用者現在滑鼠移到那裡去了、比如說,使用者現在正在操作畫面上那個項目等。
以上例而言,當使用者按下"超連結"字樣時,瀏覽器監看的結果,發現被點選的物件是 <a...>超連結</a>,而按下"文字"時,則被點選的物件則是 <div>...</div>
舉個例子來說,"有人拍了湯姆一下",和"有人拍了湯姆的頭一下",這兩個情況都是"拍(onclick)",但,在觀察者眼中,這兩種情況的"部位(物件)"則有明顯不同。
這個觀察者角色,以物件型式存在,名稱就叫作 e,在 IE 中則叫作 event。至於觀察到正在作用中的物件則是 e.target,在 IE 中為 event.srcElement。再來看一次測試語法,這次加上顏色以供區別
<div onclick="alert('A');">文字<a href="javascript://"" onclick="alert('B');">超連結</a></div>
把紅色物件 onclick 事件的設計,加入兩個參數,例如 onclick="myFun(event,this);" 把 event 事件物件當作參數傳遞,再把 this (本身) 也當作物件傳遞。
所以,當使用者按下紅色部份的文字,e.target 相當於整串紅色物件,但不包括藍色文字部份,所以當 this 和 e.target 相同時,就能確定只是按在紅色部份。
所以,上例程式部份,實作時,有幾個地方可以修改,首是,紅色部份的 onclick 可以不變動,因為要避免的是按在紅色部份時,一併觸動藍色部份,所以,在處理藍色部份的 onclick ,加入判別,判定監看到的 e.target 是不是和使用者按下去的物件相同。
其次,在行 5 判斷使用 e.target.id 則可以簡化成 e.target 即可。
補充:3/18 12'
有網友告知,依 W3C 提供的資訊,使用 stopPropagation() 是較妥善的方法,這裡有詳細說明。 http://www.quirksmode.org/js/events_order.html
同意轉載,不過麻煩看一下轉載需知