[問題] onclick 在 tr 上

[kerash (烽火連天依山盡)]

[[[ 參考資料 : http://www.aichengxu.com/article/Javascript/627_7.html ]]]


我想做一個 onclick 的功能
是在 tr 上，會如下

<table>
 <tr onclick="do_event(xxx)">
 <td><input type="checkbox" name="chkcal" /></td>
 <td><input type="text" name="inpcal[]" /></td>
 <td><input type="text" name="inpcal[]" /></td>
 ..
 </tr>
</table>


但是遇到一個狀況就是當我在 tr 點選時，正常的執行 js
然而在 input 上 click 卻也會跟著執行 do_event 的動作

我的 do_event 是要用在處理 checkbox 的 checked 動作
所以這樣的話會變成我在 checkbox 點選就會自動取消QQ


有甚麼方法能夠在空白地方點擊才會觸發 do_event 事件嗎？


感恩QQ..

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.30.6
→ nenpow:最簡單應該是在input裡 onClick="return false;" 吧
→ kerash:使用過了，無效QQ
推 LaPass:剛剛一開始也這樣想，結果點下去會把checkbox給勾選給撤銷
→ Canboo:這個問題就我看來，這INPUT本來也就屬於TR，所以應該是要
→ LaPass:javascript是怎麼阻止事件上溯的過程啊.... orz
→ kerash:我找到的一個參考是用 cancelBubble 之類的東西
推 LaPass:要不要試著用 onblur (失去焦點) 去觸發檢查？
→ kerash:但是我個人還沒測試Orz
→ kerash:to LaPass: 怎麼使用?
推 LaPass:跟onClick一樣啊，只是把他放在checkbox上或是input上
→ LaPass:你在input上加個onblur="javascript:alert('onblur')"自己
→ LaPass:點點看，就知道觸發時機了
→ Canboo:從別的方式把INPUT加上去讓他不要在TRTD內，不然就是不應該
→ Canboo:有INPUT在TR內
→ Canboo:本身我是覺得這個需求有點奇怪，是什麼功能或需求要這樣子
→ kerash:LaPass: 如果用 onblur 那在這之前還是會有 onclick 事件先
→ kerash:觸發，這樣看的流程上就有一點點問題了
→ kerash:Canboo: 可以參考yahoo/gmail 信箱的樣子，但是他們主要是
→ kerash:點選中間會是瀏覽信件(用的大量ajax吧..)
→ kerash:但在觸發某些空白處是勾選的效果
→ kerash:我主要只是把中間改成 input 放在裡面，因為有文字要修改
用編輯的好了：
畫面看起來會像是

┌──┬─┬────────────┐
│ 口 │1 │[text:xxxxxxxxxxxxxx]   │
├──┼─┼────────────┤
│....│  │ ..................     │

點選非 input 的部分會觸發 onclick 把 checkbox 勾選或取消
但 input text 是要給使用者輸入的部分 ...
大概就是這樣
※ 編輯: kerash          來自: 114.34.30.6          (02/22 14:34)
推 LaPass:瞭解你的意思了....
→ LaPass:等答案ing
→ nenpow:onclick="javascript:event.stopPropagation();"
→ nenpow:放input
→ kerash:樓上方法 chrome 有效，FF未測，ie無效，我再找找通用
→ kerash:這個方法是我上面說的取消 bubble 的方法之一..先感謝><
→ bibo9901:onclick="event.cancelBubble=true;"
→ nenpow:推樓上 ie 有自己的
以下是目前在網路上找跟在這邊組合的解答

function stopevt(e)
{
 if( typeof(e)=="undefined"&&typeof(window.event)!="undefined") e =
window.event;

 e.cancelBubble = true;
 if (e.stopPropagation) {
        e.stopPropagation();
 }
}

但是在 FF 還是無效...Orz
※ 編輯: kerash          來自: 114.34.30.6          (02/22 14:49)
→ bibo9901:但 FF 跟 GC 現在也兼容了
→ emn178:判斷觸發event的element是input類型就return掉
→ kerash:樓上，這樣不行，因為tr在外面他一定先觸發到tr..
→ kerash:我剛剛測完 firefox 了，知道問題在哪了!
FIREFOX 測試結果，利用以下方法測

function mozchk()
{
alert("ohoh");
stopevt();
alert("oh2");
}

發現這樣測試，可以成功阻止 oh2 的alert
因此如果按照原本的狀況

function inpchk()
{
  alert("what!");
  stopevt();
}

<table>
<tr onclick="mozchk()">
 <td><input type="text" onclick="inpchk()"></td>
</tr>
</table>

會是先讀取到 mozchk 才處理 inpchk 導致沒辦法阻止
而其他的 browser 則是先處理了 inpchk 才進行 mozchk
所以 mozchk 就被停住了 ...

大概是這樣，看來要用個 global flag 了...
※ 編輯: kerash          來自: 114.34.30.6          (02/22 15:05)
→ nenpow:原po有用framework嗎?
→ kerash:no , 單一頁面
※ 編輯: kerash          來自: 114.34.30.6          (02/22 15:21)
推 LaPass:推
→ TonyQ:firefox 會動啊，你是不是忘了參數要塞 event
→ TonyQ:http://jsfiddle.net/QcsB8/5/
→ TonyQ:純 JS 寫起來很繁瑣的 而且 inline JS 很難維護
→ TonyQ:firefox 的重點在 "onClick="evt_cb(event)" << 注意 event
→ kerash:謝Tony大，我在測試看看，因為我目前還習慣這種寫法Orz
→ kerash:裡面有些我本身也有帶參數，所以還不確定怎麼跑
→ kerash:我當時測確實沒加event,所以不知道會怎樣@@
→ TonyQ:沒塞event你拿不到e ，就不會stop