以下為本站文章分類清單
- AJAX
- ASP
- CSS
- Javascript
- Windows 應用程式
- 網頁設計
- 評論、短文、雜文
- 版主
- 最新回應
以下為本頁本文內容
避免子物件的 onclick 事件同時引發父物件事件
Photo by http://www.squidoo.com
情況是
<div onclick="alert('A');">文字<a href="javascript://"" onclick="alert('B');">超連結</a></div>
當按下"超連結"字樣時，會跳出 A 還是 B？
實作的結果是：按"超連結"時，會跳出 B 然後跳出 A，而按下"文字"時，則只跳出 A。現在的問題是：按"超連結"字樣時，如何只跳出 B，而不跳出 A。
先談解決方法
javascript 部份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>
為了讓讀者識別，有些變數名稱，我改掉，原文出處請按這裡
e.target / event.srcElement
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
以下為文章回應區
同意轉載，不過麻煩看一下轉載需知