[問題] onclick 在 tr 上 **FF已測

看板Ajax作者 (烽火連天依山盡)時間14年前 (2012/02/22 13:58), 編輯推噓5(5039)
留言44則, 7人參與, 最新討論串1/3 (看更多)
[[[ 參考資料 : 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

02/22 14:01, , 1F
最簡單應該是在input裡 onClick="return false;" 吧
02/22 14:01, 1F

02/22 14:12, , 2F
使用過了,無效QQ
02/22 14:12, 2F

02/22 14:18, , 3F
剛剛一開始也這樣想,結果點下去會把checkbox給勾選給撤銷
02/22 14:18, 3F

02/22 14:19, , 4F
這個問題就我看來,這INPUT本來也就屬於TR,所以應該是要
02/22 14:19, 4F

02/22 14:19, , 5F
javascript是怎麼阻止事件上溯的過程啊.... orz
02/22 14:19, 5F

02/22 14:21, , 6F
我找到的一個參考是用 cancelBubble 之類的東西
02/22 14:21, 6F

02/22 14:21, , 7F
要不要試著用 onblur (失去焦點) 去觸發檢查?
02/22 14:21, 7F

02/22 14:21, , 8F
但是我個人還沒測試Orz
02/22 14:21, 8F

02/22 14:22, , 9F
to LaPass: 怎麼使用?
02/22 14:22, 9F

02/22 14:24, , 10F
跟onClick一樣啊,只是把他放在checkbox上或是input上
02/22 14:24, 10F

02/22 14:26, , 11F
你在input上加個onblur="javascript:alert('onblur')"自己
02/22 14:26, 11F

02/22 14:26, , 12F
點點看,就知道觸發時機了
02/22 14:26, 12F

02/22 14:26, , 13F
從別的方式把INPUT加上去讓他不要在TRTD內,不然就是不應該
02/22 14:26, 13F

02/22 14:26, , 14F
有INPUT在TR內
02/22 14:26, 14F

02/22 14:27, , 15F
本身我是覺得這個需求有點奇怪,是什麼功能或需求要這樣子
02/22 14:27, 15F

02/22 14:28, , 16F
LaPass: 如果用 onblur 那在這之前還是會有 onclick 事件先
02/22 14:28, 16F

02/22 14:28, , 17F
觸發,這樣看的流程上就有一點點問題了
02/22 14:28, 17F

02/22 14:31, , 18F
Canboo: 可以參考yahoo/gmail 信箱的樣子,但是他們主要是
02/22 14:31, 18F

02/22 14:31, , 19F
點選中間會是瀏覽信件(用的大量ajax吧..)
02/22 14:31, 19F

02/22 14:31, , 20F
但在觸發某些空白處是勾選的效果
02/22 14:31, 20F

02/22 14:32, , 21F
我主要只是把中間改成 input 放在裡面,因為有文字要修改
02/22 14:32, 21F
用編輯的好了: 畫面看起來會像是 ┌──┬─┬────────────┐ │ 口 │1 │[text:xxxxxxxxxxxxxx] │ ├──┼─┼────────────┤ │....│ │ .................. │ 點選非 input 的部分會觸發 onclick 把 checkbox 勾選或取消 但 input text 是要給使用者輸入的部分 ... 大概就是這樣 ※ 編輯: kerash 來自: 114.34.30.6 (02/22 14:34)

02/22 14:35, , 22F
瞭解你的意思了....
02/22 14:35, 22F

02/22 14:37, , 23F
等答案ing
02/22 14:37, 23F

02/22 14:37, , 24F
onclick="javascript:event.stopPropagation();"
02/22 14:37, 24F

02/22 14:39, , 25F
放input
02/22 14:39, 25F

02/22 14:41, , 26F
樓上方法 chrome 有效,FF未測,ie無效,我再找找通用
02/22 14:41, 26F

02/22 14:41, , 27F
這個方法是我上面說的取消 bubble 的方法之一..先感謝><
02/22 14:41, 27F

02/22 14:43, , 28F
onclick="event.cancelBubble=true;"
02/22 14:43, 28F

02/22 14:47, , 29F
推樓上 ie 有自己的
02/22 14:47, 29F
以下是目前在網路上找跟在這邊組合的解答 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)

02/22 14:49, , 30F
但 FF 跟 GC 現在也兼容了
02/22 14:49, 30F

02/22 14:59, , 31F
判斷觸發event的element是input類型就return掉
02/22 14:59, 31F

02/22 15:00, , 32F
樓上,這樣不行,因為tr在外面他一定先觸發到tr..
02/22 15:00, 32F

02/22 15:01, , 33F
我剛剛測完 firefox 了,知道問題在哪了!
02/22 15:01, 33F
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)

02/22 15:15, , 34F
原po有用framework嗎?
02/22 15:15, 34F

02/22 15:18, , 35F
no , 單一頁面
02/22 15:18, 35F
※ 編輯: kerash 來自: 114.34.30.6 (02/22 15:21)

02/22 15:26, , 36F
02/22 15:26, 36F

02/22 17:23, , 37F
firefox 會動啊,你是不是忘了參數要塞 event
02/22 17:23, 37F

02/22 17:23, , 38F

02/22 17:24, , 39F
純 JS 寫起來很繁瑣的 而且 inline JS 很難維護
02/22 17:24, 39F

02/22 17:25, , 40F
firefox 的重點在 "onClick="evt_cb(event)" << 注意 event
02/22 17:25, 40F

02/22 21:36, , 41F
謝Tony大,我在測試看看,因為我目前還習慣這種寫法Orz
02/22 21:36, 41F

02/22 21:36, , 42F
裡面有些我本身也有帶參數,所以還不確定怎麼跑
02/22 21:36, 42F

02/22 21:37, , 43F
我當時測確實沒加event,所以不知道會怎樣@@
02/22 21:37, 43F

02/23 00:37, , 44F
沒塞event你拿不到e ,就不會stop
02/23 00:37, 44F
文章代碼(AID): #1FH8GFNF (Ajax)
文章代碼(AID): #1FH8GFNF (Ajax)